javascript - Variable being overriden in for loop -

for each event, different location. when displayed on ui locations have been overridden last api call. how can stop happening?

$scope.eventloc = '';     api.get({entity: 'organisation', entity_id: oid, property: 'campaign', property_id:cid, property2:'events'}, function(resp) {         $scope.orgevents = resp.data;         (i in resp.data) {             ceid = resp.data[i].campaigneventid;             lid = resp.data[i].locationid;             api.get({entity: 'location', entity_id: lid}, function(resplocation){                 $scope.eventloc = resplocation.data;             })         }     });  <li ng-repeat="event in orgevents track $index">     <h2>{{event.name}}</h2>     {{eventloc.address1}} </li> 

simply change code this:

//$scope.eventloc = ''; //this can removed     api.get({entity: 'organisation', entity_id: oid, property: 'campaign', property_id:cid, property2:'events'}, function(resp) {         $scope.orgevents = resp.data;         angular.foreach($scope.orgevents, function(orgevent) {             //ceid = orgevent.campaigneventid; //this not being used?             lid = orgevent.locationid;             api.get({entity: 'location', entity_id: lid}, function(resplocation){                 orgevent.eventloc = resplocation.data;             });         });     });  <li ng-repeat="event in orgevents track $index">     <h2>{{event.name}}</h2>     {{event.eventloc.address1}} </li>