AngularJS Events vs. Isolated Scope

Because isolated directive scopes do not prototypically inherit from parent scopes, updates to their values are delayed until the next digest cycle, and thus the directive may have an outdated scope inside an event listener.

HTML

<div ng-app="app">
  <div ng-controller="ctrl1">
    
    <p>Original: {{ text }}</p>
    <input type="text" ng-model="new" />
    <button ng-click="setText(new)">Update</button>
    
    <directive text="text"></directive>
    
    <script type="text/ng-template", id="dir.html">
    	<p>
      	Received via event: {{ fromEvent }}<br />
        Scope during event: {{ atEvent }}<br />
        Scope eventually: {{ text }}
      </p>
    </script>
  </div>
</div>

JavaScript

let app = angular.module("app", []);

app.controller("ctrl1", function($scope) {
  $scope.text = "something";

  $scope.setText = function(text) {
    $scope.text = text;
    $scope.$broadcast("event", text);
  }
});

app.directive("directive", function() {
  return {
    scope: {
      text: "="
    },
    templateUrl: 'dir.html',
    controller: function($scope) {
      $scope.$on("event", function(e, val) {
        $scope.fromEvent = val;
        $scope.atEvent = $scope.text;
      });
    }
  }
})