title: Angular ngChange handler gets old value
body: <p>I am creating angular directive, which wraps html input with bootstrap form group. I use ng-change event to listen to changes, but I get old value inside ng-change handler.To show this, I created to identical directives, one uses ng-keyup and another uses ng-change event to listen to changes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);
  
  app.controller('home', function() {
    this.textKeyUp = 'KeyUp';
    this.textNgChange = 'NgChange';
    
    this.textKeyUpChanged = function() {
      console.log('Changed on KeyUp:', this.textKeyUp);
    };
    
    this.textNgChangeChanged = function() {
      console.log('Changed on NgChange:', this.textNgChange);
    };
  });
  
  app.directive('apTextKeyUp', function() {
    return {
      controller: function() {},
      controllerAs: 'ctrl',
      bindToController: {
        model: '=',
        change: '&amp;'
      },
      scope: {},
      template: '&lt;input ng-model="ctrl.model" ng-keyup="ctrl.change()" /&gt;'
    };
  });
  
  
  app.directive('apTextNgChange', function() {
    return {
      controller: function() {},
      controllerAs: 'ctrl',
      bindToController: {
        model: '=',
        change: '&amp;'
      },
      scope: {},
      template: '&lt;input ng-model="ctrl.model" ng-change="ctrl.change()" /&gt;'
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-controller="home as ctrl"&gt;
      &lt;h3&gt;KeyUp&lt;/h3&gt;
      &lt;ap-text-key-up model="ctrl.textKeyUp" change="ctrl.textKeyUpChanged()"&gt;&lt;/ap-text-key-up&gt;
      
      &lt;h3&gt;NgChange&lt;/h3&gt;
      &lt;ap-text-ng-change model="ctrl.textNgChange" change="ctrl.textNgChangeChanged()"&gt;&lt;/ap-text-ng-change&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Both directives update model value, but inside textNgChangeChanged handler value is not updated yet.</p>
  
  <p>Is this by design? How can I fix this problem?</p>