AngularJS: data fetched by gapi client does not show up on UI

Question

I have an angular js app. I am using gapi to sign in and then call my google cloud endpoints to fetch the data. The sign in thing works fine and also it fetches the data fine from end points.

But after it fetches the data, if I assign the data to a $scope variable (which is bound to UI), it does not update the UI. There is no error even. Below is my code snippet. Any ideas?

function TestCtrl($scope){
   $scope.contactsList = [];//UI template is bound to this list
//Assuming the gapi client is already loaded
gapi.client.contactendpoint.list().execute(function(resp) {
            if (!resp.code) {
                $scope.contactsList = resp.items;//Does not update ui list
            } else {
                alert("Error, response is: "
                    + angular.toJson(resp));
            }
        });
}

Regards, Nadeem Ullah

Answer 1

You need to use $apply() if you wish to update the scope from outside of the angular framework (for example from browser DOM events, setTimeout, XHR or third party libraries). More info available at http://docs.angularjs.org/api/ng.$rootScope.Scope.

function TestCtrl($scope){
   $scope.contactsList = [];//UI template is bound to this list
   //Assuming the gapi client is already loaded
   gapi.client.contactendpoint.list().execute(function(resp) {
     if (!resp.code) {

       $scope.$apply(function(scope) {
         scope.contactsList = resp.items;
       });

     } else {
       alert("Error, response is: " + angular.toJson(resp));
     }
  });
}