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

i trying bind metroui modal dialog angular controller property. way can show , hide 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 can control opening dialog setting vm.isdialogvisible boolean on controller.

problem trying update vm.isdialogvisible attribute when user closes dialog (via close button). has ideas how fix that?

it cool find own solution (took me day :-)). made mistake use show / hide features of element. should have used data attribute of element. way able access

ondialogclose

function, enable me update scope. below solution

appmod.directive(showdialog,  ['$timeout','$parse',function ($timeout, $parse){     return {         restrict: 'a',         scope:false,         link: function (scope, element, attrs) {                 var e1 = thedialog.data('dialog');              $timeout(() => {                 e1.options.ondialogclose = (dialog) => {                     var model = $parse(attrs.showdialog);                     model.assign(scope, false);                     scope.$digest();                 };             }, 0);              scope.$watch(attrs.showdialog, function (value) {                 if (value) {                     e1.open();                 }                 else {                     e1.close();                 }             });         }     } }]);