title: ngChange fires before value makes it out of isolate scope
body: <pre><code>//main controller
  angular.module('myApp')
  .controller('mainCtrl', function ($scope){
      $scope.loadResults = function (){
          console.log($scope.searchFilter);
      };
  });
  
  // directive
  angular.module('myApp')
  .directive('customSearch', function () {
      return {
          scope: {
              searchModel: '=ngModel',
              searchChange: '&amp;ngChange',
          },
          require: 'ngModel',
          template: '&lt;input type="text" ng-model="searchModel" ng-change="searchChange()"/&gt;',
          restrict: 'E'
      };
  });
  
  // html
  &lt;custom-search ng-model="searchFilter" ng-change="loadResults()"&gt;&lt;/custom-search&gt;
  </code></pre>
  
  <p>Here is a simplified directive to illustrate. When I type into the input, I expect the <code>console.log</code> in <code>loadResults</code> to log out exactly what I have already typed. It actually logs one character behind because <code>loadResults</code> is running just before the <code>searchFilter</code> var in the main controller is receiving the new value from the directive. Logging inside the directive however, everything works as expected. Why is this happening?</p>
  
  <p><strong>My Solution</strong></p>
  
  <p>After getting an understanding of what was happening with ngChange in my simple example, I realized my actual problem was complicated a bit more by the fact that the ngModel I am actually passing in is an object, whose properties i am changing, and also that I am using form validation with this directive as one of the inputs. I found that using $timeout and $eval inside the directive solved all of my problems:</p>
  
  <pre><code>//main controller
  angular.module('myApp')
  .controller('mainCtrl', function ($scope){
      $scope.loadResults = function (){
          console.log($scope.searchFilter);
      };
  });
  
  // directive
  angular.module('myApp')
  .directive('customSearch', function ($timeout) {
      return {
          scope: {
              searchModel: '=ngModel'
          },
          require: 'ngModel',
          template: '&lt;input type="text" ng-model="searchModel.subProp" ng-change="valueChange()"/&gt;',
          restrict: 'E',
          link: function ($scope, $element, $attrs, ngModel)
          {
              $scope.valueChange = function()
              {
                  $timeout(function()
                  {
                      if ($attrs.ngChange) $scope.$parent.$eval($attrs.ngChange);
                  }, 0);
              };
          }
      };
  });
  
  // html
  &lt;custom-search ng-model="searchFilter" ng-change="loadResults()"&gt;&lt;/custom-search&gt;
  </code></pre>