角度模态对话框指令在Ionic App中不起作用

Question

我正在使用angular指令来显示模态对话框。该指令在Web应用程序中按预期工作。我将它与Ionic Application集成在一起，模态对话框只触发一次。这是我的代码片段

angular.module('app', ['ionic'])
.directive('modalDialog', function () {
    return {
        restrict: 'E',
        scope: {
            show: '='
        },
        replace: true, // Replace with the template below
        transclude: true, // we want to insert custom content inside the directive
        link: function (scope, element, attrs) {

            scope.dialogStyle = {};
            if (attrs.width)
                scope.dialogStyle.width = attrs.width;
            if (attrs.height)
                scope.dialogStyle.height = attrs.height;
            scope.hideModal = function () {
                scope.show = false;
            };
        },
        template: "<div class='ng-modal' ng-show='show'>  <div class='ng-modal-overlay' ng-click='hideModal()'></div>  <div class='ng-modal-dialog' ng-style='dialogStyle'>    <div class='ng-modal-close' ng-click='hideModal()'>X</div>    <div class='ng-modal-dialog-content' ng-transclude></div>  </div></div>"
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.modalShown = false;
    $scope.toggleModal = function () {
        $scope.modalShown = !$scope.modalShown;
    };

}]);

在Html页面中：

 <button ng-click='toggleModal()'>Open First Dialog</button>
  <modal-dialog show="modalShown"  width='200px' height='60%'>
            <p>Modal Content Goes here</p>
  </modal-dialog>

有什么想法吗？或任何建议非常感谢..