title: AngularJS Directive scope not binding in time
body: <p>I'm having a binding timing issue with my AngularJS directive. Its controller looks like this:</p>
  
  <pre><code>controller: function($element, $scope)
  {
      $element.find("input").bind("blur", function()
      {
          SendUpdate();
      });
  
      $scope.Subtract = function()
      {
           Add(-$scope.step);
      }
  
      $scope.Add = function()
      {
          Add($scope.step);
      }
  
      function Add(amount)
      {
          $scope.model = parseInt($scope.model) + parseInt(amount);
          console.log("Model: " + $scope.model);
          SendUpdate();
      }
  
      function SendUpdate()
      {
          $scope.$emit("ProcessUpdate");
      }
  }
  </code></pre>
  
  <p>Everything works properly thus far, and start at a value of 100 and adding 10, it prints out Model: 110, as expected. But, when the event is handled by the parent scope, which is providing the variable that model is bound to, it has not received the updated value by the time the event fires:</p>
  
  <pre><code>$scope.$on("ProcessUpdate", function()
  {
      console.log("MyValue: " + $scope.MyValue);
  });
  </code></pre>
  
  <p>That prints out MyValue: 100, even though it's $scope.MyValue that is bound to the directive's model variable (I'm using the "=" binding character, too).</p>
  
  <p>The value is, in fact, being updated. If I press a button that prints out the same exact thing:</p>
  
  <pre><code>console.log("MyValue: " + $scope.MyValue);
  </code></pre>
  
  <p>It prints the correct value of MyValue: 110. So it's clearly a timing issue. It looks like things are happening in this order:</p>
  
  <ol>
  <li>Update the directive's $scope.model.</li>
  <li>Fire the event.</li>
  <li>Handle the event.</li>
  <li>Update the parent's $scope.model.</li>
  </ol>
  
  <p>What I need is for 4 to happen immediately after 1, because when the event is fired I need the parent scope to be up to date.</p>
  
  <p>Is there a different way that I should be doing this? I don't want to pass the updated value via the event because any number of these directives could be firing and they need to all process the parent scope. I don't want to have to figure out what changed and inject it accordingly. I just want to fire the event after the parent scope has received the directive's new value.</p>
  
  <p>Thank you.</p>