AngularJS, AngularConfirm - Update Confirmation Dialog once function is completed

Question

I am trying to figure out how to make the following $ngConfirm box update after a function is completed.

After submit is clicked, the following appears (the cog is spinning):

$scope.inProgress = function(){
    $ngConfirm({
        theme: 'modern',
        icon: "fa fa-cog fa-spin fa-.5x fa-fw",
        title: 'File is downloading  Please wait.',
        content: "",
        buttons: {
        }
    });
};

After this box is displayed, the function doSomething() gets called. Once that function returns, I would like to update the display to the following (the cog stops):

$scope.Complete = function(){
    $ngConfirm({
        theme: 'modern',
        icon: "fa fa-cog fa-.5x fa-fw",
        title: 'Spreadsheet Generated!',
        content: "File size is {$scope.fileSize}, Do you want to save it?",
        buttons: {
            'Yes, save my file': {
                downloadStuff();
                $ngConfirm('Spreadsheet saved to "Downloads" folder.');
            },
            'No, take me back': {
                action: function(){
                    $ngConfirm('Download has been cancelled.');
                }
            }
        }
    });
};

And this is the way I currently have it set up in the submit() function inside my controller:

$scope.submit = function() {

    $scope.inProgress();

    $scope.doSomething();

    $scope.Complete();
};

Using the above code, my application displays both elements layered over eachother. I am stuck trying to figure out how to make $scope.inProgress() update with the details inside $scope.Complete() once $scope.doSomething() returns.

Could someone offer me some advice on what changes I need to make? I've tried to tinker with $scope.inProgress at the end of the submit function, but I always end up displaying a new confirm box or not actually changing something.

My current idea is something along the lines of

$scope.ConfirmationControl = function() {
    $scope.inProgress(){
        storageService.doSomethingCool().then(
            $scope.inProgress() = //updated elements
        )
    }
} 

Does that make sense? Am I close or thinking about this totally wrong?

Thank you in advance for your help! :)

Angular Confirm

Answer 1

There is an example of how to change content on the site. https://craftpip.github.io/angular-confirm/#quickfeatures . Under the Features header you can click on the button labeled "Dialogs" to see an example. Basically you will need to put everything in the content: option with some scope variables. When doSomething() is done, set a $scope variable ( $scope.somethingWasDone in this case) and in your dialog have the ng-if . Below is an untested example.

$scope.inProgress = function(){
    $scope.title = 'File is downloading. Please wait.';
    $ngConfirm({
        scope: $scope,
        icon: "fa fa-cog fa-spin fa-.5x fa-fw",
        content: '<h2>{{title}}</h2>' +
                 '<div ng-if="somethingWasDone">' +
                     '<div>File size is 250kb, do you want to save it?</div>' + 
                     '<button ng-click="downloadStuff()">Yes</button>' +
                     '<button ng-click="cancel()">No</button>' +
                 '</div>'
    });
};

// when your doSomething function is done
$scope.doSomething().then(function(result) {
    $scope.title = 'Spreadsheet Generated!';
    $scope.somethingWasDone = true;
});