Append a popup to body on click with Angular (and then remove) - angularjs

Question

I'm trying to wrap my head around the directive concept in Angular.
I want to show a modal box when clicking on a link. The contents of the modal box is dynamic. In jQuery it would be an easy $("body").append(myModal) and then simply remove() it from the DOM when closed.
Now I'd like to do the same in pure Angular. This is what I have so far:
A controller function:
$scope.userLogout = function() {
notification.show();
};
A service:
.service('notification', ['$rootScope',
function($rootScope) {
var notification = {
open: false,
show : function() {
this.open = true;
},
hide: function() {
this.open = false;
}
};
return notification;
}
])
A directive:
.directive('notification', ['notification',
function(notification){
return {
restrict: 'E',
replace: true,
template: (notification.open) ? '<div class="myModal"></div>' : ''
}
}])
How do I update the directive when the value in my service changes? Or is this the right approach at all?

Answer 1

For what it's worth, with something like Angular, it's possible to simply use data-ng-show and data-ng-hide on an element styled like a modal. Depending on your use case, you may not need to create a directive to achieve what you want. Consider the following:
HTML:
...
<div data-ng-show="notification.open" class="modalPopup">
...
{{notification.my_modal_message}}
...
<button data-ng-click="closeModal()">Close</button>
</div>
JS (simplified):
function myCtrl ($scope) {
$scope.notification = {
my_modal_message: "Bender's back, baby!",
open: false
}
$scope.logout = function () {
// logout stuff
logout().success(function () {
// open the modal
$scope.notification.open = true;
}
}
$scope.close = function () {
$scope.notification.open = false;
}
}
At times, it's much better to make a full directive to do something like this for you. However, again - depending on your use case - this may be all you need. Just something to keep in mind.