Binding data into localStorage with ngStorage - what's wrong here?

I started this journey trying to get some settings to persist with localStorage, has some problems and posted about it here (without a solution): Why won't this data bind? An odd case in Angularjs

I've abandoned that method as I learnt about ngStorage. In theory ngStorage lets you 2-way bind into and out of Angular models. It's a great, great theory.

I'm having problems with it though. It half works.

The ideas is this:

1. Test for permission selection (true or false).
2. If no selection (first time use) pop-up a choice.
3. Store the choice.
4. On restart use the stored choice to set the permission true or false.
5. Allow user to change the permission from within the app.

It works up to number 4.

Testing shows that although on first use I can set $storage.analytics to true or false subsequent changes are not being stored and retrieved from local storage.

Here is the code:

permissionCallback = function(permission){  
  if(permission===1){
      console.log("analytics allowed");
      analytics.startTrackerWithId('UA-45544004-1'); 
      $scope.$storage.analytics=true;
      navigator.notification.alert('You can turn analytics off in the Data Tracking section at any time.', null, 'Analytics On', 'OK');
  }else{
      console.log("analytics denied");
      $scope.$storage.analytics=false;
      navigator.notification.alert('You can turn analytics on in the Data Tracking section at any time.',null , 'Analytics Off', 'OK');
  }
}

if(typeof $scope.$storage.analytics === 'undefined'){
  navigator.notification.confirm('This app would like your permission to collect data on how you use the app. No personal or user identifiable data will be collected.', permissionCallback, 'Attention', ['Allow','Deny']);
}
else{
  console.log('start analytics are', $scope.$storage.analytics); 
  if(typeof analytics !== 'undefined'){
    console.log("analytics functioning");
    analytics.startTrackerWithId('UA-45544004-1'); 

      $scope.trackClick = function(category, action){
        analytics.trackEvent(category, action); 
        console.log('Tracking category: ' + category + ', Section: ' + action + '.');
      }
  }
}
$scope.counter = 0;
$scope.change = function(){
  $scope.counter++;
  console.log('analytics are ' + $scope.$storage.analytics);
}

And here is the html.

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

It's either a fault with my logic or, and I think this more likely, a misunderstanding about the scope of the data.

The odd thing is the console log in the change() function (which is purely for tracking these things) is always correct. So using $storage.analytics in the html is the correct way to do it (using $scope.storage.analytics causes all sorts of errors) and it is indeed binding from the html into $scope.storage.analytics.

So why isn't it saving it to local storage when using the toggle?