title: AngularJS scope updated after ng-change
body: <p>I have a directive that centralises my select HTML and functionality but I have an issue where the ng-model is updating after ng-change happens.</p>
  
  <p>Here's a focused jsfiddle example:</p>
  
  <p><a href="http://jsfiddle.net/U3pVM/1568/" rel="nofollow">http://jsfiddle.net/U3pVM/1568/</a></p>
  
  <p>(Code because SO complains otherwise)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;    
      &lt;div ng-controller="MainCtrl"&gt;
          &lt;p&gt;fooId is currently : {{fooId}}&lt;/p&gt;
  
          &lt;app-drop-down model="fooId" options="fooOptions" opt-value="id" opt-label="label" on-change="dropDownChanged"&gt;&lt;/app-drop-down&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.controller('MainCtrl', function ($scope, $log) {
      $scope.fooId = -1;
  
      $scope.fooOptions = [{
          id: 1,
          label: "A"
      }, {
          id: 2,
          label: "B"
      }];
  
      $scope.dropDownChanged = function (id) {
          $log.info('changed : ' + $scope.fooId + ' but really: ' + id);
      };
  });
  
  app.directive('appDropDown', function () {
      return {
          restrict: 'E',
          replace: true,
          scope: {
              model: '=',
              options: '=',
              onChange: '='
          },
          template:
              '&lt;div&gt;&lt;select ng-model="model" ng-options="a[optValue] as a[optLabel] for a in options" ng-change="changed()"&gt;&lt;/select&gt;&lt;/div&gt;',
          link: function (scope, element, attrs) {
              scope.optValue = attrs.optValue;
              scope.optLabel = attrs.optLabel;
  
              scope.changed = function () {
                  scope.onChange(scope.model);
              };
          }
      };
  });
  </code></pre>
  
  <p>The console logs:</p>
  
  <p>changed : -1 but really: 1</p>
  
  <p>changed : 1 but really: 2 </p>
  
  <p>When you change the select to A, then to B.</p>
  
  <p>It is updating but after the ng-change is triggered.</p>
  
  <p>Obviously, I can work around this by passing the id (like I do) or using $watch in the controller on the value but this isn't ideal for certain more complex scenarios.</p>
  
  <p>Any ideas?</p>