Why won't this data bind? An odd case in Angularjs

Here is the controller:

.controller('DataCtrl', function($ionicPlatform, $scope, $rootScope) {

    $ionicPlatform.ready(function(){
        $scope.analyticsOn = localStorage.analytics; 
        console.log('analytics are', $scope.analyticsOn);

        $scope.counter = 0;
        $scope.change = function(){
            $scope.counter++;
            console.log('analytics are ' + $scope.analyticsOn);
            localStorage.analytics = $scope.analyticsOn; 
        }
    })
});

And here is the html:

<li class="item item-toggle">
   <i class="icon ion-cloud"></i> Data Tracking is {{analyticsOn}} {{counter}}
      <label class="toggle toggle-balanced">
         <input type="checkbox" ng-model="analyticsOn" ng-change="change()">
          <div class="track">
             <div class="handle"></div>
          </div>
       </label>
    </li>

Pressing the toggle gets the console message "analytics are undefined" no matter what.

Yet, and here is the thing, in the app the {{analyticsOn}} updates and flips from true to false and the {{counter}} counts up from an initial value of zero.

So I know that -

  • a. Two way data binding IS working, or the counter wouldn't work.
  • b. analyticsOn IS changing.

So why don't the console.logs show it? The plan is to put the value back into the localStorage.analytics for data persistence but this is the first time I've used ng-change. If I did this in pure JavaScript it would be fine.

Anyone?

EDIT: I ended up abandoning this as I heard about ngStorage - a plugin that lets you bind directly into and out of localStorage without the intermediate step of getting data from the model into localStorage.

That itself has brought up it's own issues, which I'll be asking questions about elsewhere.

It could possible to update both localStorage & $scope variable together by storing whole localStorage in one scope variable, By making this change you could get rid of ng-change directive too.

Markup

<input type="checkbox" ng-model="localStorage.analyticsOn" ng-change="change()">

Code

.controller('DataCtrl', function($ionicPlatform, $scope, $rootScope) {

    $ionicPlatform.ready(function(){
        $scope.localStorage= localStorage; 
        console.log('analytics are', $scope.localStorage.analyticsOn);

        $scope.counter = 0;
        $scope.change = function(){
            $scope.counter++;
            console.log('analytics are ' + $scope.localStorage.analyticsOn);
        }
    })
});

The first console.log line is wrong it is

console.log('analytics are', $scope.analyticsOn);

should it be console.log('analytics are' + $scope.analyticsOn);