Angular.js watching the result of a function call

Question

Is there any ostensible issue with the following snippet: ``` ``` with this js: ``` $scope.pathElements = function() { var retval = []; var arr = $scope.currentPath().split('/'); if (arr[0] == '') { arr[0] = '/'; } var url = "/"; retval.push({name: arr[0], url: url}); for (var i = 1; i < arr.length; ++i) { if (arr[i] != '') { url += arr[i] + '/'; retval.push({name: arr[i], url: url}); } } return retval; }; ``` This seems to be causing a "Error: 10 $digest() iterations reached. Aborting!" error, but I'm not sure why. Is it because pathElements() is returning a new array each time? Is there a way to get around this?

Accepted Answer

Yes, this happens because you're returning a new array every time, and the $digest cycle loops infinitely (but Angular ceases it). You should declare it outside the function.

```
$scope.pathArray = [];
$scope.pathElements = function() {
  // retval becomes $scope.pathArray
  if (weNeedToRecalcAllPathVariables) {
    $scope.pathArray.length = 0;
    // ...
  }

// ...
}
```

We use `$scope.pathArray.length = 0` instead of creating a new one, to avoid it firing continuously.

You should also consider what @Flek suggests. Call this function only once, in the time you need it to recalculate. And all you binds should be directly over `$scope.pathArray`.

If you do need a function to test its clenaning state before using it, then at least I suggest you to create two separate functions, just to keep each function with it own attribution.

Angular.js watching the result of a function call

Solution

Problem