nitte93user3232918 nitte93user3232918 - 1 month ago 9
AngularJS Question

AngularJS Data Binding not updating content dynamically

I'm trying to retrieve data from Google books API -

https://www.googleapis.com/books/v1/volumes


Here's the plnkr link-
https://plnkr.co/edit/K4f7CVIeurAUMRzQYMb0?p=preview


I enter the ISBN number(say: 1234) in the search text, and update the bookList with the response items that I received from google.

I'm trying to iterate over these books using
ng-repeat
but it's not updating.
I need to click on search twice to see the result in
ng-repeat
.

I'm confused why isn't it updating the content dynamically.

See the plnkr link. https://plnkr.co/edit/K4f7CVIeurAUMRzQYMb0?p=preview

Enter 1234 in the search text and click search, won't update in the html.

Click search again, it updates the html with the last response.

Thanks.

Answer Source

You are using jQuery to make your call, outside angular $digest. You should use $http service instead.

$http({
  url: "https://www.googleapis.com/books/v1/volumes",
  method: 'GET',
  params: {q:first.inputISBN}
});

https://plnkr.co/edit/VkeBZL8ZF6gfYQ9iQoFv