title: Adding debounce to an input text box with an "ng-keyup" in Angular.js
body: <p>I have this directive for a search box</p>
  <pre class="lang-js prettyprint-override"><code>// Define the search-box
  alSH.directive('searchBox',[function(){
        return {
          restrict: 'E',
            template: `
      &lt;input 
        placeholder=&quot;Search..&quot; 
        class=&quot;search-box&quot;
        ng-keyup=search($evt) 
        ng-model=&quot;query&quot;
        ng-model-options=&quot;{ debounce: 1000 }&quot;
      /&gt;`,
          controller: function SearchBoxController($scope, helper) {
      $scope.query = ''; //ng model
      $scope.search = function() { //this calls in every keyup event
        helper.setQuery($scope.query).search();
      };
      
      helper.setQuery('').search();
    }
      };
  }]);
  </code></pre>
  <p>and i tried to use <code>ng-model-options=&quot;{ debounce: 1000 }&quot;</code> but still it keeps sending a network request for each key stroke without updating the <code>ng-model</code> probably due to the <code>ng-keyup</code>.<br />
  I found this <a href="https://stackoverflow.com/questions/28186657/debounce-is-not-working-with-keyup-event-in-angular">post</a> which asks for something similar but I didn't seem to understand the solution</p>
  <p>I have added a <a href="https://codepen.io/cmgchess/pen/MWrZdOq" rel="nofollow noreferrer">codepen</a> demo which has the above code snippet where I'm trying to achieve this behavior</p>
  <p>Ideally I would like to limit the number of backend calls sent due to each key stroke. Any idea how to achieve this?</p>