angular.js - How to correctly display user data in the header after angular login is completed

Question

As shown in the picture: the red box in the upper right corner is the location where the user name is displayed after successful login

I am now doing it through angular event delivery. Every time the page is refreshed manually, the user's data cannot be retrieved. Which way should this be done better? Please give me some advice!

LoginController: Login view controller

function LoginController($rootScope, $scope, $state, $window, AUTH_EVENTS, AuthService, ProfileService) {
    var vm = this;
    vm.login = login;
    
    function login() {

      var userInfo = {
        username: vm.username,
        password: vm.password
      };

      AuthService.login(userInfo).then(function () {
        ProfileService.fetchUserInfo().then(function (res) {
          $scope.$emit(AUTH_EVENTS.loginSuccess, res);
          $state.go('app.program.list');
        })
      })

    }

  }

AppCtrl: System framework controller, including header

function AppCtrl($rootScope, $scope, $state, $translate,
                   $localStorage, $window, $document, $timeout,
                   cfpLoadingBar, AuthService, AUTH_EVENTS) {

    $rootScope.$on(AUTH_EVENTS.loginSuccess, function (e,data) {
      $rootScope.user = data.data;
    });
    
}）

Answer 1

angular.module("myApp",[])
        .run(function (AuthService) {
            AuthService.login();
        })