AngularJS $http don't trigger digest loop

Question

I have an issue with angular digest loop. When I do a http call and put response in $scope, that var is not updated on view until next digest loop.

E.g. I have the folliwing call wrapped into function and button on view which calls function using ng-click. First time when I click the button, nothing is happened on view (http response sent and response is received). After clicking the button for the second time, view is updated with data from previus response and current response is updated after the next click etc...

$scope.loadItems = function(){
   ItemService.getData().then(function(rsp) {
      $scope.items = rsp.data;
    });
}

ItemService.getData() is basically wrapping $http call:

getData : function(){
    return $http({
    method: 'GET',
    url: '/api/items'
    });
}

And html

<button ng-click="loadItems()">Load</button>

Thanks!

Answer 1

You need to change getData() to look like this:

getData: function() {
  return $http({
  method: 'GET',
  url: '/api/items'
  }).then(function(response) {
    return response.data;
  }, function(error) {
    return error;
  });
}

and $scope.loadItems() to

$scope.loadItems = function(){
   ItemService.getData().then(function(rsp) {
      $scope.items = rsp;
    });
}

Answer 2

Ok, I guess the problem is the following. I bet you use the $scope.items in an ng-repeat, do you? e.g.

<ul>
    <li ng-repeat="item in items">
        //Here goes my little item
    </li>
</ul>

Right? Well, there is a problem. The ng-repeat takes a reference to the "items" collection and once the referenced collection is changed, the HTML is updated. But ... The problem of doing

$scope.items = rsp.data;

is that you assign to the "items" a brand new collection which is NOT referenced by the ng-repeat - it still references the old one which was not changed. Therefore the following should work - use a dot in your $scope.

Controller:

$scope.data = {};

ItemService.getData().then(function(rsp) {
    $scope.data.items = rsp.data;
});

View:

<ul>
    <li ng-repeat="item in data.items">
        //Here goes my little item
    </li>
</ul>

In another words, the problem is not in calling the digest cycle - it IS called. The problem is in misuse of the $scope.

This link should be helpful. It explains the scope nuances in more details.