Angularjs does not save variable up to $ scope after calling AJAX in request $ http.get

Question

I am using angularjs and I cannot force the next controller to save the $ scope variable the data returned from the AJAX request to Flickr. $http.get makes a call to a locally stored json file. After success, it uses the json returned in success() to determine the appropriate URL to call the Flickr AJAX API. After the success of this call, I am logging data on the console. So far so good, it returns an array of three objects. However, I am trying to set this array to the $ scope ( $scope.photos ) variable so that I can $scope.photos over my view template. However, when I try to output {{photos}} in html, there is nothing. I suspect this is a promise problem, and the template is rendering before AJAX returns the data from Flickr, but I go through the docs without any frills (looked a bit at $q ). I am a little new to Angular and will be grateful for your understanding. Thanks!

 artistControllers.controller('PhotoController', ['$scope', '$http', '$routeParams', '$q', function ($scope, $http, $routeParams, $q){ $http.get('js/data.json').success(function(data){ $scope.artists = data; $.ajax({ type : "GET", dataType : "jsonp", url : $scope.artists[$routeParams.itemId].flickr, success: function(flickr){ $scope.photos = flickr.items; console.log($scope.photos); } }); }); }]); 

Answer 1

Thank you all for your help and feedback. I found a solution using $ q and $ http.jsonp, thanks in part to this guide:

http://youtu.be/gApduktFwxw?t=17m

Here is my code, please note that for my API URL string for flickr, &jsoncallback=JSON_CALLBACK :

 $http.get('js/data.json').success(function(data){ $scope.artist = data[$routeParams.itemId]; var url = $scope.artist.flickr; console.log(url); $scope.init = function(){ $scope.getImages() .then(function(res){ console.log(res); }, function(status){ console.log(status); }); }; $scope.getImages = function(){ var defer = $q.defer(); $http.jsonp(url) .success(function(res){ defer.resolve(res); console.log(res); }).error(function(status, err){ defer.reject(status); console.log(err); }); return defer.promise; }; $scope.init(); 

Answer 2

Do not use jQuery.ajax . Angular $http can do JSONP too. You can learn more about here .

 artistControllers.controller('PhotoController', ['$scope', '$http', '$routeParams', '$q', function ($scope, $http, $routeParams, $q){ $http.get('js/data.json').success(function(data){ $scope.artists = data; $http.jsonp($scope.artists[$routeParams.itemId].flickr).success(function(data){ $scope.photos = flickr.items; console.log($scope.photos); }); }); }]); 

Answer 3

Since you are executing code outside of Angular knowledge, you need to manually call $scope.$digest() so that it “sees” your change and updates the markup accordingly.

Just change your success handler to:

  success: function(flickr){ $scope.photos = flickr.items; $scope.$digest(); } 

Note: $scope.$apply() will also work, because it does the $digest every single application area, starting with $rootScope down. In a large application, this can be much slower than necessary, so in your case, I recommend only digesting from the scope that you are changing.