title: Clear input field when a key is pressed in it
body: <p>I tried to clear the input field on the <strong>keypress</strong> event in angularjs directive.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;input class="magic-input" type="number" ng-model="demo.input"&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>.directive('magicInput', function () {
  return {
      restrict: 'C',
      require: 'ngModel',
      link: function (scope, elem, attrs, ngModel) {
          elem.bind('keypress', function () {
              ngModel.$setViewValue('');
              ngModel.$render(); 
          });
      }
  }
  });
  </code></pre>
  
  <p>The problem here is that the directive clear current text but the <strong>pressed key</strong> remains in the input field.</p>
  
  <p><a href="https://jsfiddle.net/pratikkulshreshth/ytwt83sp/" rel="nofollow">here</a> is the fiddle for this problem.</p>