ionic v1 storing token in service not working angularjs

I'm trying to store a token from a login service in a variable, to retrieve it later and add it to the header in order to be able to consume more services from the API. I'm able to login and get the token but it is not getting saved when I try to get it back from the variable I'm storing it in, not too sure what I'm doing wrong as there are no syntax mistakes. Any help is appreciated. Here's my code example:

1. services.js

   .service('loginService', function($http, $ionicPopup, $window) {
   
     var token = '';
   
     return {
   
      login: function(username, password, practicePin){
   
        var url = 'https://localhost/login';
   
        var parameter = JSON.stringify({username:username, password:password, pin:practicePin});
   
        $http.post(url, parameter).then(function(response){
   
            token = response.headers()['token'];
   
            var alertPopup = $ionicPopup.alert({
              title: 'Welcome ' + username,
              subTitle: token
            });
   
            alertPopup.then(function(res) {
              $window.location.href = 'home.html';
            });
   
        }).
        error(function(data, status, headers, config) {
          $ionicPopup.alert({
            title: 'BAD CREDENTIALS'
          });
        })
      },
   
      getToken: function(){
        return token;
      }
     }
   })
   

At this point, the token is saved in the variable as the picture shows

But then when I try to get the token back from the controller, it is empty.

.controller('FindSlotCtrl', function($scope  , $ionicPopup, $state, loginService) {

 $scope.login = function(username, password, practicePin) {

   loginService.login(username, password, practicePin);

 };

 $scope.token = function(){

   $ionicPopup.alert({

     title: 'TOKEN -> ' + loginService.getToken()

   });

 };
}

Here's the second alert and the token variable seems to be empty, I tried to store in an array, the first time I execute .length of the array is equals to 1, but then on the second alert it would show me length = 0.

I also tried to set and get the token from another service/factory and injecting it in the loginService but I was getting the same result eitherway.

In the end I was able to get the result that I wanted by using the $window.localStorage, might not be the best way to solve it, but at least I could make it work. Here's the code example:

1. service.js

   .service('loginService', function($http, $ionicPopup, $window) {
   
   return {
   
     login: function(username, password, practicePin){
   
       var url = 'https://localhost/login';
   
       var parameter = JSON.stringify({username:username, password:password, pin:practicePin});
   
       $http.post(url, parameter).then(function(response){
   
        var token = response.headers()['token']
   
        $window.localStorage['token'] = token;
   
        var alertPopup = $ionicPopup.alert({
   
            title: 'Welcome ' + username
   
        });
   
        alertPopup.then(function(res) {
   
          $window.location.href = 'home.html';
   
        });
   
       }).
       error(function(data, status, headers, config) {
           $ionicPopup.alert({
             title: 'BAD CREDENTIALS'
           });
        })
       }
     }
   })
   

2. controllers.js

   .controller('FindSlotCtrl', function($scope, $window, $ionicPopup,loginService) {
   
     $scope.token = $window.localStorage['token'];
   
     $scope.login = function(username, password, practicePin) {
   
      loginService.login(username, password, practicePin);
   
     };
   
     $scope.tokenAlert = function(){
   
        $ionicPopup.alert({
   
          title: $scope.token
   
        });
   
     };
   })
   

   Picture of the second screen after logging in