Calling Function Inside AngularJS Goes In Endless Loop

I am new to AngularJS and I was building a sample app. I want to display the result of Google maps response on my web page. Here I pass the sample value, but the page goes on a loo

Solution 1:

When you invoke a function within interpolation {{xxx()}} you need to be careful. Interpolation runs every digest cycle and you are calling a function within that, All is well, but then within the function you are making an $http call which again triggers a digest cycle (after it has resolved/rejected and every promise chain) and interpolation expression gets evaluated again to stabilize the view. Angular will just go on hoping the view will be stable after every digest cycle, but apparently not. Angular does this loop till an max limit of 10 times (internally set but configurable though it will not solve your problem) internally and stops trying to stabilize displaying the error which you see in your console.

Just make the call when an event is triggered and not sure why exactly you want to do that. But you could as well do it in the controller right away when it is instantiated and bind the data as property to the view. Or bind the function getAddress(url) during a specific event happens (i cant recommend further with the limited knowledge of why you are invoking getAddress('ottava') from the interpolation)

An example, in your view

{{distance.text}}

In the controller:

    $scope.distance = {};
    //After getAddress definition call it directly from controller 
    $scope.getAddress('ottava').then(function(text){
       $scope.distance.text = text
    });