title: How to update AngularJS model from directive linking function?
body: <p>What I am trying to achieve is to add extra interface for input fields to be able to increace and decrease numeric value in them by clicking + and - buttons.</p>
  
  <p>(In essence it is what input[type=number] fields have on chrome, but I want this to be cross-broswer compatible and also have full control of presentation accross all browsers).</p>
  
  <p>Code in view:</p>
  
  <pre><code>&lt;input data-ng-model="session.amountChosen" type="text" min="1" class="form-control input-small" data-number-input&gt;
  </code></pre>
  
  <p>Directive code:</p>
  
  <pre><code>app.directive('numberInput', function() {
  return {
      require: 'ngModel',
      scope: true,
      link: function(scope, elm, attrs, ctrl) {
  
          var currValue = parseInt(scope.$eval(attrs.ngModel)),
              minValue = attrs.min || 0,
              maxValue = attrs.max || Infinity,
              newValue;
  
          //puts a wrap around the input and adds + and - buttons
          elm.wrap('&lt;div class="number-input-wrap"&gt;&lt;/div&gt;').parent().append('&lt;div class="number-input-controls"&gt;&lt;a href="#" class="btn btn-xs btn-pluimen"&gt;+&lt;/a&gt;&lt;a href="#" class="btn btn-xs btn-pluimen"&gt;-&lt;/a&gt;&lt;/div&gt;');
  
          //finds the buttons ands binds a click event to them where the model increase/decrease should happen
          elm.parent().find('a').bind('click',function(e){
  
              if(this.text=='+' &amp;&amp; currValue&lt;maxValue) {
                  newValue = currValue+1;    
              } else if (this.text=='-' &amp;&amp; currValue&gt;minValue) {
                  newValue = currValue-1;    
              }
  
              scope.$apply(function(){
                  scope.ngModel = newValue;
              });
  
              e.preventDefault();
          });
  
  
      }
    };
  </code></pre>
  
  <p>})</p>
  
  <p>This is able to retrieve the current model value via scope.$eval(attrs.ngModel), but fails to set the new value.</p>
  
  <p>Aftermath edit: this is the code that now works (in case you wan't to see the solution for this problem)  </p>
  
  <pre><code>app.directive('numberInput', function() {
    return {
      require: 'ngModel',
      scope: true,
      link: function(scope, elm, attrs, ctrl) {
  
          var minValue = attrs.min || 0,
              maxValue = attrs.max || Infinity;
  
          elm.wrap('&lt;div class="number-input-wrap"&gt;&lt;/div&gt;').parent().append('&lt;div class="number-input-controls"&gt;&lt;a href="#" class="btn btn-xs btn-pluimen"&gt;+&lt;/a&gt;&lt;a href="#" class="btn btn-xs btn-pluimen"&gt;-&lt;/a&gt;&lt;/div&gt;');
          elm.parent().find('a').bind('click',function(e){
  
              var currValue = parseInt(scope.$eval(attrs.ngModel)),
                  newValue = currValue;
  
              if(this.text=='+' &amp;&amp; currValue&lt;maxValue) {
                  newValue = currValue+1;    
              } else if (this.text=='-' &amp;&amp; currValue&gt;minValue) {
                  newValue = currValue-1;    
              }
  
              scope.$eval(attrs.ngModel + "=" + newValue);
              scope.$apply();            
  
              e.preventDefault();
          });
      }
    };
  })
  </code></pre>