I have an AngularJs application that is detecting the change of the state (using ui.router) to present the user with the option to save unsaved changes. Now I'm doing this with a confirm dialog:

```
$scope.$on('$stateChangeStart', () => {
    if (self.changed && confirm('There are unsaved changes. Do you want to save them?'))
        this.save();
});

```

I wanted to change it to using the `$modal` dialog from the bootstrap ui library. The problem I have is that as the `$modal.open()` call returns inmediatelly (being asynchronous) the state changes before opening the dialog and it's never opened.

```
$scope.$on('$stateChangeStart', () => {
    if (self.changed)
       this.$dialog.open({...}).result.then(()=>{
            this.save();
        });
});

```

Is there a way to overcome this problem or am I stuck to using the plain javascript confirm dialog?