Обмен данными между файлами html / javascript

Question

Мой индекс. html вызывает NAVBAR и МЕНЮ в разных html / js файлах. NAVBAR получает пользователя из базы данных и его роли, поэтому я могу отображать информацию пользователя в панели навигации в зависимости от ролей пользователя.

Проблема в том, что в МЕНЮ мне также необходим доступ к ролям пользователя.

Самым простым решением было бы сделать один запрос в каждом файле js для пользователя, который глуп, но он будет работать.

Поэтому я попытался сохранить данные в localStorage ...

NAVBAR

 angular.module('test').controller('NavBarCtrl', ['$scope', '$http', 'apiBaseURL', '$location', function($scope, $http, apiBaseURL, $location) {
        $http.get(`${apiBaseURL}/user?username=${localStorage.getItem('username')}`).then((res) => {
            $scope.user = res.data;
            // Store user
            localStorage.setItem('user', JSON.stringify($scope.user));
    });
  });

MENU

angular.module('test').controller('MainMenuCtrl', ['$scope', '$http', 'apiBaseURL', function($scope, $http, apiBaseURL) {

    $scope.user = JSON.parse(localStorage.getItem("user")); 
    console.log($scope.user); // first run is null

 });

Указатель. html

    <div ng-include="'app/pages/navBar/navBar.html'"></div>

    <div ng-include="'app/pages/sideMenu/sideMenu.html'"></div>

Проблема заключается в том, что пользователь впервые заходит на страницу, localStorage.getItem("user") в меню равно нулю, потому что запрос в navbar занимает x миллисекунд для запуска .

Что может быть правильным решением для моей проблемы? Я использую angularjs