Ionic update Checkbox value

I'm trying to update the Toggle/Checkbox value back to default/Off when the user selects the cancel option. Currently it sticks to Red/On.

Any suggestions to figuring this out would be great,

Before
enter image description here

Alert
enter image description here

After
enter image description here

Controller

// Default Value
  $scope.turnClearAppData = 'Off';
  // Ionic OK Alert
  $scope.showConfirm = function(val) {
    if ( val == 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          $localStorage.$reset();
          // Redirect After Reset
          $location.path('/intro/part-one');
        } else {
          // On Cancel Update Value
          $scope.turnClearAppData = 'Off';
        }
      });
    }
  };

HTML

    <li class="item item-toggle noborder">
      Clear App Data {{turnClearAppData}}
       <label class="toggle toggle-assertive">
         <input type="checkbox" ng-model="turnClearAppData" ng-true-value="'On'" ng-false-value="'Off'" ng-change="showConfirm(turnClearAppData)">
         <div class="track">
           <div class="handle"></div>
         </div>
       </label>
    </li>

Try to use $timeout in such cases where updating the scope variable value do not update the related changes. Try this.

// Default Value
  $scope.turnClearAppData = 'Off';
  // Ionic OK Alert
  $scope.showConfirm = function(val) {
    if ( val == 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          $localStorage.$reset();
          // Redirect After Reset
          $location.path('/intro/part-one');
        } else {
          // On Cancel Update Value
          $timeout(function () {
             $scope.turnClearAppData = 'Off';
          }, 0);
        }
      });
    }
  };

The problem is in the scope.
I answered a question few days ago where I have some links to some tutorials where they tell you exactly why you should avoid using scope as a model.

The best solution is to avoid $scope to attach your view model.

You can have a look at this plunker where your sample works.

I've used a ControllerAs syntax to fix the problem.

It's very easy to implement. In my plunker I've defined the ControllerAs in the state:

.state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeController as vm'
});

but you can do it in many other ways:

<div ng-controller="HomeController as vm">

</div>

in your controller now you create your viewmodel:

.controller('HomeController', function($scope, $state, $timeout, $ionicPopup)     {

   var vm = this;

   vm.turnClearAppData = 'Off';

   vm.showConfirm = function(val) {
     if ( val === 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          // $localStorage.$reset();
          // Redirect After Reset
          // $location.path('/intro/part-one');
          alert('Ok pressed!');
        } else {
          // On Cancel Update Value
          vm.turnClearAppData = 'Off';   
          return vm.turnClearAppData;
        }
      });
    }
  };

});

Notice the var vm = this as first expression. Now all your objects and methods are mapped on the viewmodel (vm).

Your HTML now can work with the viewmodel

<li class="item item-toggle noborder">
      Clear App Data {{vm.turnClearAppData}}
       <label class="toggle toggle-assertive">
         <input type="checkbox" ng-model="vm.turnClearAppData" ng-true-value="'On'" ng-false-value="'Off'" ng-change="vm.showConfirm(vm.turnClearAppData)">
         <div class="track">
           <div class="handle"></div>
         </div>
       </label>
</li>

obtaining the expected behaviour.