Updated
you can use $timeout service to create delay function. this can be applied to other directive callback
$scope.delay = (function() {
var promise = null; //cache promise for cancelation
return function(callback, delayTime) {
$timeout.cancel(promise);
promise = $timeout(callback, delayTime);
};
})();
usage
angular.module('myApp', []);
angular.module('myApp')
.controller('myCtrl', ["$scope", "$log", "$timeout",
function($scope, $log, $timeout) {
$scope.delay = (function() {
var promise = null;
return function(callback, ms) {
$timeout.cancel(promise); //clearTimeout(timer);
promise = $timeout(callback, ms); //timer = setTimeout(callback, ms);
};
})();
$scope.doSomeThing = function(value) {
var current = new Date();
$scope.result = 'value:' + $scope.foo + ', last updated:' + current;
};
}
]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>$timeout delay demo</h3>
<div>
<input ng-model="foo" ng-change="delay(doSomeThing, 1000)" type="text" />
</div>
<div>Result: {{result}}</div>
</div><input ng-model="value" ng-change="delay(controller.functions.valueChanged(value), 1000)"