title: Angular does not update bound property
body: <p><a href="http://jsfiddle.net/HB7LU/5322/" rel="nofollow">Fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      &lt;button my-event-directive&gt;Click me&lt;/button&gt;
      &lt;div&gt;{{secret}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  
  myApp.directive('myEventDirective', function() {
        return {
          link: function(scope, element) {
              element.on('click', function(event){
                  scope.$emit('myEvent', {secret: 'aaa'}); 
              });
          }
        }
  })
  
  function MyCtrl($scope) {
      $scope.secret = 'bbb';
      $scope.$on('myEvent', function(event, data){
          alert('event received!');
          $scope.secret = data.secret;
      });
  }
  </code></pre>
  
  <p>After I click the button, the event is received in the controller (alert shows up). However, the <code>{{secret}}</code> binding does not update its value. Why?</p>
  
  <p>My event creation is more sophisticated in real code, of course.</p>