Angularjs & dialog jQueryui - change {{msg}} only after the dialog closed - angularjs

Question

I'm creating a jQueryui dialog in an angularjs directive.
The template of the directive is very simple:
<div class="myPopup">
<div>{{msg}}</div>
</div>
In the link method in the directive, I'm creating the dialog and register on openPopup event:
link: function (scope, element) {
var popupEl = $(element).find('.myPopup');
popupEl.dialog({ ... });
scope.$on('openPopup', function (event, args) {
scope.msg = "MY_MSG";
popupEl.dialog( "open" );
});
}
Pay attention that I'm populate scope.msg variable.
When the popup is open, I cannot see my msg.
I looked into the DOM and found that when the popup was opened, the {{msg}} was empty:
<div class="myPopup">
<div></div>
</div>
but when I closed the popup the DOM changed and the msg changed to scope.msg:
<div class="myPopup">
<div>MY_MSG</div>
</div>
Can someone please tell me what is wrong here and why it reacts like this?
Thanks!

Answer 1

As you have noted when you add scope.$apply() after your change to the scope.msg the value is updated correctly, but you get an exception of $apply already in progress.
If you read this article it explains why you need to use the $scope.$apply() method. Essentially AngularJS watches for changes to data on your scope, then it runs through a process of notifying the parts of your code that care about these changes. However sometimes parts of your code run while this process is in the middle of notifying, and if that happens and your code makes changes to the scope, it doesn't get seen until a little later - which is why you saw the message only update when the dialog closed.
So you need to trigger the $scope.$apply manually. Sometimes this can simply be to call that command after you make your change, but other times it will conflict and throw the 'in progress' exception.
The solution is to use the applyAsync method, which will queue your code to run in the next digest cycle; this is usually after a delay of about 10 milliseconds.
link: function (scope, element) {
var popupEl = $(element).find('.myPopup');
popupEl.dialog({ ... });
scope.$on('openPopup', function (event, args) {
// Trigger the change in the next digest cycle
scope.$applyAsync(function() {
scope.msg = "MY_MSG";
popupEl.dialog( "open" );
});
});
}