javascript - How to limit frequency of calls to model functions in angularjs? -

i'm learning angularjs , picking apart first example, todo list connected todo javascript model.

in html have:

<div ng-controller="todoctrl">     <span>{{remaining()}} of {{todos.length}} remaining</span> 

in controller script have:

$scope.remaining = function () {      // --> alert called on each keystroke     alert('remaining called');      var count = 0;     angular.foreach($scope.todos, function (todo) {         count += todo.done ? 0 : 1;     });     return count; }; 

i'm thinking become latency problem if on each keystroke references controller have evaluated.

what approach, if any, used make more efficient?

you can use $watch method on scope react when todos changed. cant way better performance.

$scope.$watch('todos', function() {     $scope.remaining = ... // remaining int }, true); 

also, if use new angular, $watchcollection method.