title: Increment or decrement an input's ng-model using ng-keyup
body: <p>I'd like to use <code>ng-keyup</code> to watch for the up and down arrow keys and increment or decrement the value in an input. This seems like it should be straightforward, but this fiddle does not work: <a href="http://jsfiddle.net/a8tgW/3/" rel="nofollow noreferrer">http://jsfiddle.net/a8tgW/3/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div  ng-controller="MyCtrl"&gt;
    &lt;input type="text" ng-model="minPotatoes" ng-keyup="onKeyup($event, minPotatoes)" /&gt;
    &lt;input type="text" ng-model="maxPotatoes" ng-keyup="onKeyup($event, maxPotatoes)" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>function MyCtrl($scope) {
    $scope.onKeyup = function (evt, val) {
      if(evt.keyCode === 40) {
        val -= 1
        console.log("decrementing val", val)
      } else if (evt.keyCode === 38) {
        val += 1
        console.log("incrementing val", val)
      }
    }
    $scope.minPotatoes = 2;
    $scope.maxPotatoes = 10;
  }
  </code></pre>
  
  <p>I've tried using <code>$apply</code>, but a digest is already in progress. I've read <a href="https://stackoverflow.com/questions/22466842/why-wont-ng-keypress-change-ng-model-values?rq=1">this</a> question, but it uses an external listener which doesn't have access to the model reference.</p>
  
  <p>I could reference the scope value directly, instead of the passed in value, but it would be less coupled if the key handler had no knowledge of the model it was impacting.</p>