AngularJS: View won't update

Question

I'm trying to update my nav bar every time the route changes, and I've tried this, however it doesn't seem to be working. It's supposed to write bob every time the view changes, but it only writes it when the controller loads.

nav.controller.js

angular.module('app')
.controller('navController', ['$scope', '$state', function ($scope, $state) {
    var timeSpan;
    $scope.user;

    ...

    //  Update when the view changes.
    $scope.reload = function () {
        $state.reload();
    };
    $scope.$state = $state;
    $scope.$watch('$state.$current.locals.globals.view', function () {
        console.log('bob');
        $scope.user = userService.get();
    });

    ...

    $scope.reroute = function(route){
        $state.go(route);
    };
}]);

route.js

angular.module('SimPlannerApp')
.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/','/signin');

    $stateProvider
        .state('signin', {
            url: "/signin",
            templateUrl: 'views/signin.html',
            controller: 'signinController'
        })
        .state('menu', {
            url: "/menu",
            templateUrl: 'views/menu.html',
            controller: 'menuController',
            resolve: {
                config: function (configService) {
                    return configService.getConfig()
                        .then(function(response){
                            return response.data;
                        })
                        .catch(function(error){
                            console.log('Error : ', error);
                            return undefined;
                        });
                }
            }
        })
        .state('view', {
            url: '/view/:view',
            templateUrl: 'views/view.html',
            controller: 'viewController',
            resolve: {
                view: function ($stateParams, configService) {
                    return configService.getConfig()
                        .then(function(response){
                            var config = response.data;
                            for (var i = 0; i < config.views.length; i++) {
                                if (config.views[i].route === $stateParams.view) {
                                    return config.views[i];
                                }

                            }

                            return undefined;
                        })
                        .catch(function(error){
                            console.log('Error : ', error);
                            return undefined;
                        });
                },
                config: function (configService) {
                    return configService.getConfig()
                        .then(function(response){
                            return response.data;
                        })
                        .catch(function(error){
                            console.log('Error : ', error);
                            return undefined;
                        });
                }
            }
        })
        .state('404', {
            url: '{path:.*}',
            templateUrl: 'views/404.html',
            controller: 'errorController'
        });
});

PS:
Propably should mention I'm using AngularJS with ui-router.

Answer 1

You can handle with $locationChangeStart like below:

$rootScope.$on('$locationChangeStart', function () {
    console.log('bob');       
});

You should write this in .module.run() function.

 angular
   .module()
   .run(function($rootScope) {
      // to Here
   })

Answer 2

Not sure if I fully understand but would it not be better to use $stateChangeSuccess to detect when the route changes? I use this in the .run block

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

but you could place this in your Controller

https://github.com/angular-ui/ui-router/wiki