Hide a dialog through a factory

Question

I am using angular material.

I created a factory to display a loading modal.

I can display it, but I can't dismiss it.

Could you tell me why, or tell me how to do it ?

Here is my factory :

(function() {
'use strict';

angular
    .module('loveProjectApp')
    .factory('ProgressFactory', ProgressFactory);

ProgressFactory.$inject = ['$mdDialog'];

/* @ngInject */
function ProgressFactory($mdDialog) {
    var service = {
        show: show,
        cancel: cancel
    };
    return service;

    ////////////////

    function show() {
        $mdDialog.show({
            templateUrl: 'miscellaneous/progress/progress.dialog.html',
            parent: angular.element(document.body),
            clickOutsideToClose: false,
            fullscreen: false
        });
    }

    function cancel() {
        $mdDialog.hide();
    }
}
})();

And I call it like this :

        function logout() {
        ProgressFactory.show();
        authFactory.logout().then(function() {
            ToastFactory.successToast('SUCCESSES.DISCONNECTED');
            $state.reload();
            ProgressFactory.cancel();
        });

So the loader is shown, but isn't dismissed.

Answer 1

FOUND IT !

My server is running on the same machine that my application uses.

I was calling $mdDialog.cancel(); too fast visibly, so I added a 1s timeout in the factory, and now the dialog dismisses correctly.

It now works like a charm, thank you !