Navigation partial not updating even though controller $scope has new value

Question

We are building a project for a client that involves a dynamic navigation bar, the angular-local-storage module, an authorization service, a data service, and two partial, one is a Navigation bar partial and the other is a header partial. I am currently logging the user in via the Authservice and then retrieving the navigation elements from the server with an http.get call. This value is then stored in a localStorage element called navElements. The code is as follows :

Index:

<div class="main-container">
        <aside data-ng-include=" 'views/nav.html' "
               id="nav-container"
               class="nav-container"
               data-ng-class=" {'nav-fixed': admin.fixedSidebar, 'nav-horizontal': admin.menu === 'horizontal', 'nav-vertical': admin.menu === 'vertical'}"
               >
        </aside>

        <div id="content" class="content-container">
            <section data-ng-view
                     class="view-container {{admin.pageTransition.class}}"></section>
        </div>
    </div>

Login / Nav element placement

apiRequest(API_URL + 'Navigation').then(
    function(event){
       console.log(event);
       localStorageService.set("navElements", event);
       modalInstance.close(); 
       deferred.resolve(response);
       $location.url('/dashboard');
}

Navigation html

<div class="nav-wrapper" data-ng-controller="DashboardCtrl">
<ul id="nav"
    class="nav"
    data-slim-scroll
    data-collapse-nav
    data-highlight-active>
    <li ng-if="initialized"><a href="#/dashboard"> <i class="ti-home"></i><span data-i18n="Dashboard"></span> </a></li> 
    <li ng-repeat="nav in navList">
        <a href="{{nav.ButtonPath}}" disabled>
            <i class="{{nav.IconPath}}"></i>
            <span data-i18n="{{nav.Title}}"></span>
        </a>
        <ul>
            <li ng-repeat="link in nav.Children">
                <a href="{{link.NavigationUrl}}">
                    <i class="ti-angle-right"></i>
                    <span data-i18n="{{link.Title}}"></span>
                </a>
            </li    >
        </ul>
    </li>

</ul>

And the dashboard controller nav list assignment:

angular.module('app.DashboardCtrl', []).controller('DashboardCtrl',function ($q, $http, $scope, $location, $route, $window,  $modal, dataService, logger, localStorageService) {
   $scope.editMode=false;
   $scope.Rows = {};
   $scope.currentLocation = "";

   console.log($scope);

   $scope.navList = localStorageService.get("navElements");

The strange part is that the elements appear after the page is reloaded but on initial login after clearing the cookies, the nav elements do not exist. However, the nav elements reside in the $scope of the controller and $scope.$apply does not work, even with a time out. Also a console.log shows that $scope.navList is defined as soon as the user logs in and is brought to the dashboard view. I am pretty stumped with this issue and any help / suggestions would be wonderful. This issue exists with another part of the page as well so I suspect they are related.

Answer 1

I determined what was causing this issue in the first place. My HTML was loading multiple controllers to handle various requests on the page. To fix the issue I removed the multiple controllers for each page and made one controller per page that handled the various functions that were need on each respective page. It would appear the actual scopes and their data was being lost in the multiple controllers.