Angular does not update bound property - angularjs

Question

Fiddle
HTML:
<div ng-controller="MyCtrl">
<button my-event-directive>Click me</button>
<div>{{secret}}</div>
</div>
JS:
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;
});
}
After I click the button, the event is received in the controller (alert shows up). However, the {{secret}} binding does not update its value. Why?
My event creation is more sophisticated in real code, of course.

Answer 1

As #Cherinv replied in a comment, when changing a scope attributes outsite the Angular $apply method, you have to call it manually. #runTarm also suggested that the event dispatcher should use the $apply because listeners are freed from remember it then. So:
scope.$emit('myEvent', {secret: 'aaa'});
should be changed to:
scope.$apply(function() {
scope.$emit('myEvent', {secret: 'aaa'});
});
$apply method is described in details in the following article: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Answer 2

USE $scope.$apply(). NOW the change will be noticed, and the page is updated.
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! secret is ' + data.secret);
$scope.$apply(function () {
$scope.secret = data.secret;
});
});
}

Answer 3

You could try changing binding to happen on object.value rather than value. Maybe it's the case when angular can not trace immutable property change.
<div ng-controller="MyCtrl">
<button my-event-directive>Click me</button>
<div>{{data.secret}}</div>
</div>
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.data = {
secret: 'bbb'
};
$scope.$on('myEvent', function(event, data){
alert('event received!');
$scope.data.secret = data.secret;
});
}
This should work.
P.S. since you always see alert being called that means that you don't need to call scope.$apply to invoke scope digest and the value IS assigned, the problem is that angular can not watch on immutable values (probably)