metro-ui-css - Binding the Dialog to my angular controller

Question

I am trying to bind a MetroUI modal dialog to an angular controller property. This way I can show and hide the dialog using binding.

DIRECTIVE

appMod.directive('showDialog', ['$timeout', function ($timeout): ng.IDirective {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, ngModel) {
            scope.$watch(attrs.showDialog, function (value) {
                if (value) {
                    element.show();
                }
                else {
                    element.hide();
                }
            });
        }
    }
}]);

HTML:

<div class="padding20 dialog" id="dialog9" 
     data-role="dialog" data-close-button="true"
     data-overlay="true" data-overlay-color="op-dark" 
     show-dialog="vm.isDialogVisible">

This way I can control opening the dialog by setting the vm.isDialogVisible Boolean on my controller.

Problem is that I am trying to update the vm.isDialogVisible attribute when the user closes the dialog (via the close button). Anyone has some ideas how to fix that?