angularjs - Angular JS with Google Feed API - strange behaviour -

in 1 of controller functions in angular.js application, i'm trying use google's rss feed api fetch feed entries populate in scope.items model.

it's behaving quite strangely, console output in innermost part being '2' while console output in outermost loop being '0' , '1' (which correct since length of items array).

i'm thinking have google api thing being async request , hasn't finished before try manipulate (?). still doesn't make sense iterator variable become '2' though!

code:

function itemlistctrl($scope, item) { $scope.items = item.query({}, function() { // using json service     (var = 0; < $scope.items.length; i++) { // length 2 here.         $scope.items[i].entries = [];         console.log(i); // gives '0' , '1' output in iterations.         var feed = new google.feeds.feed($scope.items[i].feedurl);         feed.load(function(result) {             console.log(i); // gives '2' output in both iterations.             if (!result.error) {                 (var j = 0; j < result.feed.entries.length; j++) {                     $scope.items[i].entries[j] = result.feed.entries[j];                 }             }         });     } }); 

}

the callback function executed asynchonously, after loop on items has ended. , @ end of loop, i equal 2, since there 2 items in items array.

see javascript infamous loop issue? example of same behavior, , https://developer.mozilla.org/en-us/docs/web/javascript/guide/closures#creating_closures_in_loops.3a_a_common_mistake more in-depth explanation.