Ionic update Checkbox value - angularjs

Question

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
Alert
After
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>

Answer 1

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.

Answer 2

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);
}
});
}
};