Infinite loop with Angular expression binding

Question

I have an angular application that displays the value returned by a controller method through a simple expression binding:

Answer 1

I met the same problem as you, to fix the problem we can cache the results of the function. For this purpose I prefer to use Lo-Dash’s memoize function. I create a demo to show you how i managed to fix this problem.The following link contains the demo:http://plnkr.co/edit/KBmk4J2ZCt0SsmZlnKZi?p=preview

Answer 2

Even though your async function returns the same exact string every time, the $digest cycle is fired in loops because your function also makes an ajax call with $http service.

$http service triggers $rootScope.$apply() when requests are completed and since $apply triggers a $digest cycle it makes your view expression to be re-evaluated, which in return causes your async function to be called again, and so on...

app.controller('MainCtrl', function($scope, $http) {

  $scope.getValue = function(){
    return 'some value';
  }

  $scope.getValueAsync = function(){
    $http.get('myfile.html')
      .success(function (data, status, headers, config) {
        return 'some async value';
      });

    return 'file not found';
  }
});

<div>{{getValueAsync()}}</div>

Moral of the story: If you use functions in expressions, make sure your functions don't affect something outside of them that would trigger a $digest loop, and make sure your functions always return the same output given the same input.