AngularJS - 加载时不显示新用户名的页面

Question

在我的本地主机上，当我以用户身份登录时，它会在页面顶部显示用户名。注销后，以其他用户身份登录后，仍会显示上一个用户的用户名。然后，当我按一次刷新时，用户名就会更新。我是否在我的控制器中犯了一个错误，它不允许在页面加载时更新，而不是我必须点击刷新？

doLogin（）是我在点击提交时调用的函数。 Auth.getUser（）获取用户数据。

我的控制器：

var app = angular.module('mainCtrl', [])

.controller('mainController', function($rootScope, $location, Auth) {

    var vm = this;

    // get info if a person is logged in
    vm.loggedIn = Auth.isLoggedIn();

    // check to see if a user is logged in on every request
    $rootScope.$on('$routeChangeStart', function() {
        vm.loggedIn = Auth.isLoggedIn();    

        // get user information on page load
        Auth.getUser()
            .then(function(data) {
                vm.user = data.data;
            }); 
    }); 

    // function to handle login form
    vm.doLogin = function() {
        vm.processing = true;

        // clear the error
        vm.error = '';

        Auth.login(vm.loginData.username, vm.loginData.password)
            .success(function(data) {
                vm.processing = false;          

                // if a user successfully logs in, redirect to users page
                if (data.success) {
                $location.path('/users');
                } else {
                    vm.error = data.message;
                }
            });
    };

    // function to handle logging out
    vm.doLogout = function() {
        Auth.logout();
        vm.user = '';
        $location.path('/');
    };
});

我的Auth工厂获取用户：

// get the logged in user
authFactory.getUser = function() {
    if (AuthToken.getToken())
        return $http.get('/api/me', { cache: true });
    else
        return $q.reject({ message: 'User has no token.' });        
};

显示用户名的HTML：

<ul class="nav navbar-nav navbar-right">
        <li ng-if="!main.loggedIn"><a href="/login">Login</a></li>
        <li ng-if="main.loggedIn" class="navbar-text">Hello {{ main.user.name }}!</li>
        <li ng-if="main.loggedIn"><a href="#" ng-click="main.doLogout()">Logout</a></li>
    </ul>