AngularJS Data Binding not updating content dynamically

Question

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.

You should not use $.ajax(), use $http instead, basically your approach is wrong. — Cyberdelphos
– Cyberdelphos, Commented Mar 3, 2016 at 20:09
Ok, yeah, I'll do that. But any idea, why it's not updating. — nitte93
– nitte93, Commented Mar 3, 2016 at 20:11
you use $http like this: $http.get(url).then(function(response) { first.books = response.data; }, function(error){console.log(error)}. This way as the scope is evaluated and after the http promise is resolved your repeater will update with the result. Then your li should be <li ng-repeat="book in first.books"> — Cyberdelphos
– Cyberdelphos, Commented Mar 3, 2016 at 20:12
Hi, It worked. But I still didn't get the point of not using $.ajax method here. — nitte93
– nitte93, Commented Mar 3, 2016 at 20:39

m1gu3l · Accepted Answer · 2016-03-03 20:28:25Z

1

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

edited Mar 3, 2016 at 20:28

answered Mar 3, 2016 at 20:18

m1gu3l

7731 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nitte93 Over a year ago

Hi, Thanks for the answer. Can you please elaborate on your statement about Angular $digest. Or provide any link to read about that.

m1gu3l Over a year ago

Angular needs to be in $digest phase to see that something (in this case array of books) changed. Many things trigger $digest loop, like $http responses, ngClick, $timeout etc. You can also trigger it manually with $scope methods: $apply, $eval, $evalAsync. Then and only then angular starts dirty-checking and reacts to changes.

nitte93 Over a year ago

Thanks, that makes sense now.

Collectives™ on Stack Overflow

AngularJS Data Binding not updating content dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related