navigator alert function working after second time

Question

I have a button when clicked i do this function:

$scope.sendPolicy = function(){
    // make server request and called this call back:
    navigator.notification.alert(
        "message",
        function(){
            $state.transitionTo('main', {
                Id: $scope.Id
                });
        },
        'title',
        'confirm');

the alert pops up ok, but when the confirm button is clicked, the alert dissappears, and thats it. nothing else happens (a transition to the main screen should be triggered.) after the alert was dismissed, if the button that caused the alert to pop is clicked again, the view / page transfer is being trigered, and we pop back to the main page, and as well, the alert pops back again.

the issue is:

1. why the confirmation button does not trigger the pop back / transfer to main screen.
2. why another click on the button causes the pop / transfer?
3. why does this extra click trigers the alert again?

Answer 1

1. I think this this is an issue with angular not updating when getting the confirmation outside the angular scope. It appears that you might need to manually run a digest/apply so angular can update the scope.

2. When the button is clicked again angular is running the update and now the scope has the transition information but it will also call the alert again because it would be a separate click event.

3. explained in 2.

To fix this I think you need to call $scope.apply() at some point, either like this:

 $scope.sendPolicy = function(){
// make server request and called this call back:
navigator.notification.alert(
    "message",
    function(){
        $state.transitionTo('main', {
            Id: $scope.Id
            });
    if(!$scope.$$phase){$scope.$apply();}        
    },
    'title',
    'confirm');

Or call it at the end of the alert function.

Note: you can call this as $scope.$apply(), but this can throw an error if a digest is already in progress, so the safe way to call this is if(!$scope.$$phase){$scope.$apply();} where it is only called if not in progress.