Q: Angular UI router, resolve nested views I have a single-page application built in angularjs, using UI-Router and nested views. My code looks like this:
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider' ,'$mdDateLocaleProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $httpProvider, $mdDateLocaleProvider, $locationProvider) {
var rootpath = config.paths.components;
$stateProvider.state('home', {
    url: '/',
    views: {
        index: {
            templateUrl: rootpath + '_root/template.html',
            controller: "RootController"
        },
        "header@home": {
            templateUrl: rootpath + 'header/header-template.html',
            controller: "HeaderController"
        },
        "sidebar@home": {
            templateUrl: rootpath + 'sidebar/sidebar-template.html',
            controller: "SidebarController"
        },
        "main@home": {
            templateUrl: rootpath + 'main/main-template.html',
            controller: "MainController"
        }
    },
    resolve: {
      authorize: ['RootService', function (RootService) {
        var auth = RootService.getKey();
        return RootService.getConfig(auth.key);
      }]
    },
});

$urlRouterProvider.otherwise('/');

}]).run(['$rootScope', '$state', '$window', function($rootScope, $state, $window){
  $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
  $window.location = error.status +'.html';
});

In the "home" state, I'm doing a resolve to see if the authentication key passed in is valid. 
If the key is invalid or has expired, $stateChangeError event catches the error and redirects the user to an error page. 
This works fine when the application starts and on refresh.   
Problem is, when the key has expired (only valid for ten minutes) and the application is not reloded, the 
$stateChangeError event doesn't catch the error message. 
Any thoughts on how to fix this? 

A: You can solve this problem by using the $watch provided by the angular js.
$scope.$watch(function(scope) { return scope.data.myVar },
          function() {}
         );

The first function is the value function and the second function is the listener function. 
This example value function returns the $scope variable scope.data.myVar. If the value of this variable changes, a different value will be returned, and AngularJS will call the listener function. 
I think this might solve your problem...
