Want to update '.checked' value of ionic-toggle from localStorage

ionic-v1
1

Hey there,

I’m working on an ionic app where I have to save user’s choice to use GPS or not.

I’m using local Storage to store the ‘.checked’ value of the ionic-toggle

Everything is working fine i.e. when I check localStorage variables in the browser I can see the saved data and it being changed. However, this doesn’t get reflected to the ionic-toggle value on the page whenever I refresh the page. The page shows the ionic-toggle false by default.

Here’s the code

[JS Controller]

    $scope.gpsPreference = sharedData.getGPSValue();
    
    $scope.settingsList = [
        { text: "Use GPS", checked: $scope.gpsPreference }
    ];

    $scope.saveGPSValue = function(value){
        sharedData.setGPSValue(value);
    };

[JS Service (SharedData)]

.factory('sharedData', function(){

  var useGPS;

  if(!localStorage.getItem('gps')){
    useGPS = false;
    localStorage.setItem('gps', useGPS);
  }

  var getGPSValue = function(){
    console.log(localStorage.getItem('gps'));
    return localStorage.getItem('gps');
  };

  var setGPSValue = function(GPSValue){
    useGPS = GPSValue;
    localStorage.setItem('gps', useGPS);
  };

  return{
    getGPSValue: getGPSValue,
    setGPSValue: setGPSValue
  };

})

[HTML]

   <ion-toggle ng-repeat="item in settingsList"
                ng-model="item.checked" 
                ng-checked="item.checked"
                ng-change="saveGPSValue(item.checked)">
      {{ item.text }}
    </ion-toggle>

I have searched a lot but couldn’t solve this issue.
Thanks for reading.

Have a great day ahead!