Change ngModel value to switch tabs

Question

I'm trying to change the ngModel value after a click on the Cancel button ( sweet alert ) to switch tab ( div in html code) but it does not work.

This is the HTML :

<div ng-show="tabsMainMenu=='tabOne'">
   <h1>tabOne</h1>
</div>
<div ng-show="tabsMainMenu=='tabTwo'">
   <h1>tabTwo</h1>
</div>

And the JS :

 swal({
     title: 'Cancel?',
     text: 'Are you sure?',
     icon: 'warning',
     buttons: true
 })
 .then((cancel) => {
   if (cancel) {
   // Go back to Tab One 
   $scope.tabsMainMenu = 'tabOne';
   }
});

Only when I put the mouse cursor over the Cancel button on html page it's recognizes the new value of the tabsMainMenu ngModel .

Any ideas?

Answer 1

Promises are normally async, so they're outside angular's lifecycle. That means angular doesn't know anything changed when your .then function runs. So, you just need to wrap the stuff inside your .then function in a $scope.apply .

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply