delayed Search

HTML

<div ng-app="myApp" ng-controller="myController">   
<delayed-search ng-model="filterCriteria"></delayed-search>
    
    <span>{{filterCriteria}}</span>
</div>

JavaScript

angular.module('myApp', []).directive("delayedSearch", ['$timeout', function($timeout) {
    return {
        restrict: "E",
        template: '<input type="text" ng-model="ngModel" />',
        scope: {
            ngModel : '='
        },
        link: function (scope, element, attrs) {
            var timer = false;
            scope.$watch('ngModel', function () {
                if (timer) {
                    $timeout.cancel(timer);
                }
                timer = $timeout(function () {
                    if (element.find('input').val()) {
                        alert('search now: ' + element.find('input').val());
                    }
                }, 1000)
            });

        }
    }
}]).controller('myController', function($scope){
    
   
});