AngularJS retain selection after page refresh

Question

I have an select tag like this

 <select ng-model="teamId" 
         ng-options="team.globalId as team.name for team in teamList"
         ng-change="teamOnChange(teamId)">
 </select>

On team change I am retaining the value in LocalStorage and On page refresh I have also set the ng-model reading from Localstorage, but doesn't seem to help

I would like to retain the selected Item on page refresh, How can i do this

Answer 1

You could store your information into the LocalStorage maybe use a service too. i.e

Save In local storage

app.service('teamStorage', function() {

   var teamId;
   var teamName;

   //to save the data send it as a parameter obj
   this.saveTeam = function(data) {
        teamId = data.teamId;
        teamName = data.teamName;
        localStorage.setItem('teamInfo', JSON.stringify({
            teamName: teamName,
            teamId: teamId,
        }));
    };
   //to clear your localstorage
   this.clearTeam = function() {
        localStorage.removeItem('teamInfo');
        teamName = "";
        teamId = "";
    };

    //in case you want to get independent variables
    this.getTeamID = function() {
        return teamId;
    };

   this.getTeamName = function (){
        return teamName; 
    }
});

Inject the service to your controller

app.controller('teamController', function($scope, teamStorage) {
         //you can access your localStorage on load like this

          var myLocalStorage = localStorage.getItem('teamInfo');
           $scope.save = function(teamId) {

              var data = {
               teamID:teamId,
               teamName: myTeam
              }
              //save team in LocalStorage
              teamStorage.saveTeam(data);

            };

           //clear team from LocalStorage
           teamStorage.ClearTeam();

           //get name of team
           $scope.myTeam = teamStorage.getTeamName();

});