Angularjs not storing variable to $scope after AJAX call within $http.get request

Question

I'm using angularjs and I can't get the following controller to save to a $scope variable the data returned from an AJAX request to Flickr. The $http.get makes a call to a locally saved json file. Upon success, it uses the json returned in success() to determine the appropriate url for the AJAX call to the Flickr API. Upon success of that call, I log the data to the console. So far so good, it returns an array of three objects. However, I'm trying to set that array to a $scope variable ($scope.photos) so I can iterate over it my view template. However, when I try outputing {{photos}} in the html there is nothing. I suspect this is a promise issue, and the template is rendering before the AJAX returns the data from Flickr, but I've been pouring over the docs with no success (looked at $q a little). I'm somewhat new to Angular and would appreciate your insight. 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

Don't use jQuery.ajax. Angular's $http can do JSONP too. You can read 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 2

Because you are executing code outside of Angular's knowledge, you need to manually call $scope.$digest() for it to "see" your change and update the markup accordingly.

Just change your success handler to:

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

Note: $scope.$apply() would also work, because it does a $digest of every single scope in your application, starting from the $rootScope down. On a big application, this can be much slower than necessary, so in your case I recommend only digesting from the scope you are modifying down.

Answer 3

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

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

Here is my code, note that my API url string to flickr has &jsoncallback=JSON_CALLBACK appended to it:

$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();