page refresh causing user to get log out automatically in angular js
<p>I have a Login API which I am using it in my service</p>

<pre><code>function logInToService(callback, errback, login, password, rememberLogin) {
            var url = "User/Login";

            var authorizationHeader = {'Authorization': "Basic " + login + ":" + password};
            httpWrapperService.post(url, {login: login, password: password}, authorizationHeader).then(
                function success(loginToken) {
                    // transform data here

                    self.currentUser.emailAddress = login;
                    self.currentUser.password = password;
                    // store token in a cookie
                    self.currentUser.token = loginToken;
                    $rootScope.currentUser = self.currentUser;


                    if (rememberLogin) {

                        localStorage.userName=login;
                        localStorage.password=password;
                    }

                    httpWrapperService.setAuthenticationToken(loginToken);
                    callback(loginToken);
                },
                function error(errorObject) {
                    errback(errorObject);
                }
            );
        }
</code></pre>

<p>And in my header html I am displaying the user name on top when he gets logged in
<strong>Header.html</strong></p>

<pre><code> &lt;div class="header-user-menu"&gt;
        &lt;div ng-show="isUserLoggedIn() == false "&gt;
            &lt;a href="" ng-click="$state.go('app.sr.login')" class=""&gt;{{'HEADER.LOGIN' | translate}}&lt;/a&gt;
            &lt;!--&lt;a ui-sref="app.sr.login" class=""&gt;{{'HEADER.LOGIN' | translate}}&lt;/a&gt;--&gt;
        &lt;/div&gt;
        &lt;div ng-show="isUserLoggedIn()" class="userName"&gt;{{'HEADER.WELCOME' | translate}} {{currentUser.emailAddress}}&lt;/div&gt;

    &lt;/div&gt;
</code></pre>

<p>and js file is here</p>

<pre><code>(function() {
    'use strict';

    angular
        .module('safe-repository')
        .controller('AppLayoutCtrl', appLayoutCtrl);

    // Implementation of controller 
    appLayoutCtrl.$inject = ['$rootScope', '$scope'];

    function appLayoutCtrl($rootScope, $scope) {


        $scope.isUserLoggedIn = isUserLoggedIn;

        function isUserLoggedIn() {
            if ($rootScope.currentUser
                &amp;&amp; $rootScope.currentUser.emailAddress != null
                &amp;&amp; $rootScope.currentUser.emailAddress != '') {
                return true;
            }
            return false;
        }

    }
})();
</code></pre>

<p>and here I have one registration service where I have defined <code>logInToService</code> method</p>

<pre><code>function registrationService($rootScope, httpWrapperService, $modal, $state, $cookieStore) {
        var self = this;
        // expose functions
        self.hasUserAccessToLevel = hasUserAccessToLevel;
        self.logInToService = logInToService;
        self.getCurrentUserToken = getCurrentUserToken;
        self.showRegistrationViewForLevel = showRegistrationViewForLevel;
        self.currentUser = {
            //emailAddress: '',
            //password: '',
            //token: ''
        }

        $rootScope.currentUser = null;
        self.currentUserToken = null;

 function logInToservice (------){----}})();
</code></pre>

<p>The problem is that every time when user presses page refresh F5 , user gets logged out. Even though I am trying to store the data in localstorage , but actually I am not getting the flow of control.</p>