Angular ngChange handler gets old value
<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>