angularjs - Updating angular $scope variable inside forEach loop -

i have quite extensive filter/faceted search application. data loaded via api, , displayed on page using ng-repeat. there's google map instance has marker associated every item. application quite demanding in terms of computation. guess might overloading clients weaker machines in end.

that's enough of background. have got working way want. i'm looking performance gains , more effective ways accomplish goals.

now i'm trying figure out whether better update $scope variable (which array) inside foreach loop, or update private array , update $scope variable after loop?

so

$scope.myarraywithalltheitems = []; $scope.myarraywithitemkeystobedisplayed = [];  $http({method: 'get', url: '/myapiurl'}).success(function(data, status, headers, config) {  if (angular.isarray(data)) {      angular.foreach(data, function (item, key) {          /*              prework on item object here         */          //update scope variable every foreach iteration         $scope.myarraywithalltheitems.push({             /*             big object data                 foo : bar,                 etc...             */         });          //i store keys of items displayed on page @ 1 moment         //changing filter controls alter array, not big 1 containg data         $scope.myarraywithitemkeystobedisplayed.push(key);                          });   } else {     //display error... }  }).error(function(data, status, headers, config) {     //display error... }); 

versus (i removed comments , else branches, otherwise bit identical except 2 private arrays):

$scope.myarraywithalltheitems = []; $scope.myarraywithitemkeystobedisplayed = [];  $http({method: 'get', url: '/myapiurl'}).success(function(data, status, headers, config) {      if (angular.isarray(data)) {          //private array variables update during loop         var _myarraywithalltheitems = [],             _myarraywithitemkeystobedisplayed =[];          angular.foreach(data, function (item, key) {              _myarraywithalltheitems.push({             });              _myarraywithitemkeystobedisplayed.push(key);                              });          //now update $scope variables after loop         $scope.myarraywithalltheitems = _myarraywithalltheitems;         $scope.myarraywithitemkeystobedisplayed = _myarraywithitemkeystobedisplayed;       } }); 

it's same!

changing $scope variable not force ui/dom rendering. actual render occur when angular's $digest() called. so, unless forcing $digest() somewhere on foreach stack, no render occur until end of loop, making both options (basically) equivalent in terms of performance.

check explanation on how data binding works on angularjs.