Angular.js Infinite Loop of calling functions - html

Question

My problem is in the following template :
<div class="container">
<h1>Process Definitions</h1>
<table class="table table-stripped" >
<tr>
<td><strong>Name</strong></td>
<td><strong>Id</strong></td>
<td><strong>Version</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="def in defs | filter: global.search">
<td>{{def.name}}</td>
<td>{{def.id}}</td>
<td>{{def.version}}</td>
<td><button type="button" class="btn btn-warning" ng-click="redirectToInstance(def.id)">Instances</td>
<!--<td><h4><small>{{'Current :' + getCount(def.id) }}</small></h4></td>-->
<td><button type="button" class="btn btn-warning" ng-click="redirectToTasks(def.id)">Tasks</td>
</tr>
</table>
</div>
The problem is the function call inside the expression inside the comment-tag.
the function called is in this controller :
BPMNControllers.controller('ProcessDefinitionCtrl', ['$scope','$location', 'ProcessDefinitions','ProcessInstances',
function($scope,$location, ProcessDefinitions,ProcessInstances) {
$scope.defs = ProcessDefinitions.query();
$scope.redirectToInstance = function(id){$location.path('/process-definitions/' + id);};
$scope.redirectToTasks = function(id){$location.path('/tasks/def'+id)};
$scope.getCount = function (id){
var countObj = ProcessInstances.getCount({processDefinitionId : id});
return countObj.count;
};
console.log('ProcessDefinitionCtrl');
}]);
And the following service is important, cause it's querying a rest-api.
BPMNServices.factory('ProcessInstances', ['$resource','restUrl',
function($resource,restUrl){
var url = restUrl+'engine-rest/process-instance/:id'
return $resource(url,{id:'#id'},{
query : {method:'GET',isArray:true},
get : {method:'GET'},
getCount : {method:'GET',url:restUrl+'engine-rest/process-instance/count'}
},{})
}]);
This results in an infinite loop of ajax calls.I think i know that the problem is the asynchronous call, and since it's not directly bound the call is not fast enough and thus called and called again. How can i do this?
And the ProcessDefinitions as requested:
BPMNServices.factory('ProcessDefinitions', ['$resource','restUrl',
function($resource,restUrl){
var url = restUrl + 'engine-rest/process-definition/:id'
return $resource(url, {id : '#id'}, {
query: {method:'GET', isArray:true},
get : {method:'GET'},
start: {method:'POST',url:url+'/start'}
},{});
}]);
And the model for the global search filter :
<input type="text" class="form-control" placeholder="Search" ng-model="global.search">

Answer 1

The infinite loop is a result of your watched view expression calling a function which itself results in the triggering of a $digest cycle.
A good explanation, and another example, is provided in Infinite loop with Angular expression binding
As for your particular code, you could use a directive in place of the view expression:
HTML
<!-- results in infinite digest Count: {{getCount(def.id)}} -->
Count: <count></count>
JS
.directive('count', function(ProcessInstances){
return {
restrict: 'E',
replace: true,
link: function(scope) {
scope.countRes = ProcessInstances.getCount(scope.def.id);
},
template: '<span>{{countRes.count}}</span>'
}
});
Demo