ngChecked doesn't seem to want to bind to the model. Why?

I'm using Ionic and thus angularjs, and I'm trying to store a setting in localStorage.

I've a checkbox that I want to use to set analytics on or off. The html looks like this.

Analytics on/off
<label class="toggle toggle-balanced">
    <input type="checkbox" ng-click="toggleAnalytics()" ng-checked="analytics">
        <div class="track">
            <div class="handle"></div>
        </div>
</label>

and in the related controller I have:

$scope.analytics = $localstorage.get('analyticsOnOff');
$log.log("Analytics initialised at", $scope.analytics);

$scope.toggleAnalytics = function(){ 

   if($scope.analytics===true){
      $scope.analytics = false;
      $localstorage.set('analyticsOnOff', false);
   }else{
      $scope.analytics = true;
      $localstorage.set('analyticsOnOff', true);
   } 

 $log.log("Analytics is ", $scope.analytics);

}

So as you can see, when you change the checkbox the toggleAnalytics() function toggles $scope.analytics between true and false and updates the localstorage to reflect that.

Note that I am using $localstorage methods. $localstorage is defined in another service. It's allows you to set and get localStorage objects easily.

Anyway, my issue is a really simple, but baffling one. I know I can alter the analytics value from the console logs, but no matter what I do the checkbox initialises as on.

Any ideas?

You should be using ng-model on your checkbox, this will handle setting the actual property - and you can use a change event then:

<input type="checkbox" ng-change="toggleAnalytics(analytics)" ng-model="analytics" />

And the controller:

$scope.toggleAnalytics = function(isChecked) { 
   $localstorage.set('analyticsOnOff', isChecked);
   $log.log("Analytics is ", isChecked);
}

Thank you very much for the feedback guys.

@nickgraef for altering me to the real problem - that .get() returns a string.

@tymeJV for supplying me with a much more elegant version of my own code.

This is what I did in the end, it's a mash up of both tips. I convert the analytics variable into a boolean straight after I .get() it from localstorage.

$scope.analytics = $localstorage.get('analyticsOnOff');
$scope.analytics = ($scope.analytics == 'true' ? true : false);

$log.log("Analytics initialised at", $scope.analytics);

$scope.toggleAnalytics = function(isChecked) { 
   $localstorage.set('analyticsOnOff', isChecked);
   $log.log("Analytics is ", isChecked);
}