title: AngularJS: ng-change called before an select element is changed
body: <p>As far as I can tell, <code>ng-change</code> is called before <code>ng-model</code> is actually changed in a <code>select</code> element. Here's some code to reproduce the issue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('demo', [])
    .controller('DemoController', function($scope) {
      'use strict';
  
      $scope.value = 'a';
      $scope.displayValue = $scope.value;
  
      $scope.onValueChange = function() {
        $scope.displayValue = $scope.value;
      };
    })
    .directive("selector", [
      function() {
        return {
          controller: function() {
            "use strict";
            this.availableValues = ['a', 'b', 'c'];
          },
          controllerAs: 'ctrl',
          scope: {
            ngModel: '=',
            ngChange: '='
          },
          template: '&lt;select ng-model="ngModel" ng-change="ngChange()" ng-options="v for v in ctrl.availableValues"&gt; &lt;/select&gt;'
        };
      }
    ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div ng-app="demo" ng-controller="DemoController"&gt;
      &lt;div selector ng-model="value" ng-change="onValueChange"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;span&gt;Value when ng-change called:&lt;/span&gt;
        &lt;span&gt;{{ displayValue }}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="demo.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you run this, you should change the combobox 2 times (e.g. 'b' (must be different than the default), then 'c').</p>
  
  <ul>
  <li>The first time, nothing happens (but the value displayed in the text <em>should</em> have changed to match the selection).</li>
  <li>The second time, the value should change to the previous selection (but should have been set to the current selection).</li>
  </ul>
  
  <p>This sounds really similar to a couple previous posts: <a href="https://stackoverflow.com/questions/19269130/angularjs-scope-updated-after-ng-change">AngularJS scope updated after ng-change</a> and <a href="https://stackoverflow.com/questions/20101697/angularjs-why-is-ng-change-called-before-the-model-is-updated">AngularJS - Why is ng-change called before the model is updated?</a>. Unfortunately, I can't reproduce the first issue, and the second was solved with a different scope binding, which I was already using.</p>
  
  <p>Am I missing something? Is there a workaround?</p>