Initialize variable once to prevent “10 $digest() iterations reached”

Question

I'm doing a ng-repeat over a list returned by a function declared in the controller and I'm getting "10 $digest() iterations reached. Aborting!" message.

<div ng-repeat element in list()></div>

The function:

MyCtrl = ($scope)->
    ...
    $scope.list = ->
        list = {}
        for e in someArray
            ....    #adding stuff to list
        list
    ...

I discovered the problem is the $scope.list() function is being called several times and each time the function is called the local list variable is re-assigned so angular sees a different object each time and the ngRepeat element is redrawn. How can I avoid this?

Stewie Stewie · Accepted Answer · 2013-07-02T16:28:00

Angular expressions are evaluated at least two times per each $digest and $digest can run 10 times at a time (when bindings need to be "refreshed"). This means that expressions will be re-evaluated many times over. This is one of the common pitfall with Angular. So you need to make sure you don't call functions directly in your expressions. Instead, have the function executed once, inside the controller, and than use the function result in the expression:

function MyCtrl($scope){

  function makeList(){
    var list = [];
    // do some logic to generate a list
    return list;
  };

  $scope.list = makeList();
}

<div ng-repeat="element in list"></div>

In case you have to call the scope methods directly than make sure the methods are idempotent.

Initialize variable once to prevent “10 $digest() iterations reached”

2 Answers