Angular model update debounce

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.10" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <h1>Hello Plunker!</h1>
    <input  type="text" 
            ng-model="val" 
            ng-model-debounce="1500" 
            placeholder="type something and wait 1,5 secs"
            style="border: 1px solid grey; padding: 2px 10px; width: 300px"
    >
    <p>You value: <strong>{{val}}</strong></p>
  </body>

</html>

angular.module('app', [])

.directive('ngModelDebounce', function($timeout) {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 99,
        scope: false, // use parent scope
        
        link: function(scope, elm, attr, ngModelController) {
            var delay = attr.ngDebounce || 1000;
            
            elm.unbind('input');
            
            // debounce input changes
            var debounce;
            elm.bind('input', function() {
                $timeout.cancel(debounce);
                debounce = $timeout( function() {
                    scope.$apply(function() {
                        ngModelController.$setViewValue(elm.val());
                    });
                }, delay);
            });
            
            // fire immediately on blur
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelController.$setViewValue(elm.val());
                });
            });
        }
                     
    }
});

/* Styles go here */