AngularJS delayedModel directive.

<!DOCTYPE html>
<html ng-app="App">
<head>
    <script data-require="angular.js@*" data-semver="1.2.8" src="http://code.angularjs.org/1.2.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>
<body ng-controller="main">
    
    <input id="searchText" type="search" placeholder="live search..." delayed-model="searchText" data-delay="500" />
    
    <div class="entry" ng-repeat="entry in entries | filter:searchText">
        <span>{{entry.content}}</span>
    </div>
    
    
</body>
</html>

// Code goes here

angular.module('App', [])

.controller('main', function($scope) {
    $scope.entries = [
        {content: 'This is a test'},
        {content: 'Make it happen'},
        {content: 'Forget about love'}
    ];
})

.directive('delayedModel', function() {
    return {
        scope: {
            model: '=delayedModel'
        },
        link: function(scope, element, attrs) {
            
            element.val(scope.model);
            
            scope.$watch('model', function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.val(scope.model);        
                }
            });
            
            var timeout;
            element.on('keyup paste search', function() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    scope.model = element[0].value;
                    element.val(scope.model);
                    scope.$apply();
                }, attrs.delay || 500);
            });
        }
    };
});


// http://stackoverflow.com/a/21090800/949476

/* Styles go here */