Angularjs missing scope values for ng-init using ng-repeat

Question

Hi I have following html in my page

<div ng-repeat="a in loc" ng-init="getValues(a)">
          <div>
           <select  ng-options="c.id as c.site for c in names" ng-model=a.id></select>
         </div>
           <div>
           <select  ng-options="a.id as a.name for a in val"></select>
         </div>
   </div>

In my controller I have

   $scope.getValues = function(a) {
        $scope.val = pRepository.getVals.query({ id: a.ie }, function (data) {
            $scope.val = data;
       });

Problem I have is when "loc" list in ng-repeat is small with one or two records it works fine. When it is long with 20 records or so it misses bunch of $scope.val values and lists some of them. I tried using $promise but no luck. Please let me know how can i slow down ng-repeat or something so it loads all the vals. Thanks

Answer 1

Every time getValues(...) is called the same $scope.val property is updated (it is the val property of the parent of the scope created by ngRepeat . Since you need to have a "local" val property, you should modify the code accordingly:

<div ng-repeat="a in loc" ng-init="values = getValues(a)">
    ...
    <div>
        <select ng-model="someModel" ng-options="a.id as a.name for a in values">
        </select>
    </div>
</div>

$scope.getValues = function(a) {
    var data = [];
    pRepository.getVals.query({id: a.ie}, function (data) {
        data = data;
    });
    return data;
}

---

See, also, this short demo .