mdDialog block interface after closed

Question

i've tried to use mdDialog in my project. So far, it works perfectly, except when i close it (or hide), my UI becomes completly blocked. I cant click any buttons, links, elements unless i reload page.

Here is the example code for the dialog initialization:

$scope.sentTestNotification = function(firebaseKey, deviceName, deviceOs, username, event) {
            $mdDialog.show({
                controller: function($mdDialog, dataFactory) {
                    var vm = this;
                    vm.notificationInformation = {
                        key: firebaseKey,
                        device: deviceName,
                        os: deviceOs,
                        user: username
                    };
                    vm.notificationsTypes = []
                    dataFactory.get('get-types', {}).then(function(response) {
                        angular.forEach(response.data, function(value, key) {
                           vm.notificationsTypes.push(value.title);
                        });
                    });

                    $scope.answer = function(answer) {
                        $mdDialog.cancel(answer);
                    };
                    $scope.hide = function () {
                        $mdDialog.hide();
                    };
                    $scope.cancel = function () {
                        $mdDialog.cancel();
                    };
                },
                controllerAs: 'modal',
                templateUrl: '/storage/application/views/dashboard/notifications/sendTestNotification.html',
                parent: angular.element(document.body),
                targetEvent: event,
                scope: $scope,
                clickOutsideToClose:true
            }).then(function(response) {
            }, function(response) {
                if (response !== undefined) {
                    if (response.indexOf('send') > -1) {
                        $scope.testDevice.key = firebaseKey;
                        dataFactory.post('send-single', { fields: {
                            key: $scope.testDevice.key,
                            body: $scope.testDevice.body,
                            title: $scope.testDevice.title
                        }}).then(function(response) {
                            var isDlgOpen;
                            $mdToast.show({
                                hideDelay   : 3000,
                                position    : 'top right',
                                controller  : function($scope, $mdToast, $mdDialog) {
                                    var vm = this;
                                    vm.username = $scope.createdUsername;
                                    $scope.closeToast = function () {
                                        if (isDlgOpen) return;
                                        $mdToast
                                            .hide()
                                            .then(function () {
                                                isDlgOpen = false;
                                            });
                                    };
                                },
                                controllerAs: 'toast',
                                templateUrl : '/storage/application/views/dashboard/notifications/testNotificationToast.html'
                            });
                        });
                    }
                }
            });
        };

<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th class="td-content-center">
                    #
                </th>
                <th class="td-content-center">
                    <ng-md-icon icon="person" size="20"></ng-md-icon>
                    <span translate="dashboard.devices.username">Username</span>
                </th>
                <th class="td-content-center">
                    <ng-md-icon icon="devices" size="20"></ng-md-icon>
                    <span translate="dashboard.devices.device">Device</span>
                </th>
                <th class="td-content-center">
                    <ng-md-icon icon="system_update" size="20"></ng-md-icon>
                    <span translate="dashboard.devices.operating_system">Operating System</span>
                </th>
                <th class="td-content-center">
                    <img src="/storage/application/images/firebase.png" width="20px" height="20px" />
                    <span translate="dashboard.devices.subscription">Firebase Subscription</span>
                </th>
                <th class="td-content-center">
                    <ng-md-icon icon="settings" size="20"></ng-md-icon>
                    <span translate="dashboard.devices.actions">Actions</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="device in devicesList">
                <td class="td-content-center">{{device.id}}</td>
                <td class="td-content-center">{{device.username}}</td>
                <td class="td-content-center">{{device.device_name}}</td>
                <td class="td-content-center">
                    <ng-md-icon icon="android" data-ng-show="device.device_id == 0" size="20"></ng-md-icon>
                    <ng-md-icon icon="apple" data-ng-show="device.device_id == 1" size="20"></ng-md-icon>
                    {{device.device_version}}
                </td>
                <td class="td-content-center">
                    <span class="md-btn m-b btn-fw green" data-ng-if="device.firebase_key">Active</span>
                    <span class="md-btn m-b btn-fw red" data-ng-if="!device.firebase_key">Inactive</span>
                </td>
                <td class="td-content-center">
                    <button md-ink-ripple class="md-btn md-raised m-b btn-fw indigo" data-ng-click="sentTestNotification(device.firebase_key, device.device_name, device.device_version, device.username, $event)" translate="dashboard.devices.test_notification">Send Notification</button>
                </td>
                <td>

                </td>
            </tr>
        </tbody>
    </table>

This is what my console showing upon clicking send button and actually sending notification (after it is sent, mdDialog closes)

I've searched google for similar problem, but found no answers. Any help is appreciated!

Here is the Plunker example:
http://plnkr.co/edit/GK3cPryqsKO2kKqtmf6m?p=preview

Answer 1

I suffered with the same problem with you. I think that is because md-dialog will destroy "scope" after it closed. What you need to do is to add "preserveScope : true" within mdDialog.show.