Angular ui-router resolve not working

Question

I am trying to load a get service JSON function in the main state resolve function so I can store the data to a scope variable.

The account JSON information is relevant because all sub pages are essentially dependent on the information.

--

The below code is partially working. The account resolve function is being successfully called and even the $http returns a promise (state === 0 though). The issue is when the account function resolves the state.controller is never being called.

$stateProvider
            .state('app',{
                url: '/',
                views: {
                    'header': {
                        templateUrl: '../views/templates/partials/header.html',
                    },
                    'content': {
                        templateUrl: '../views/templates/partials/content.html' 
                    },
                    'footer': {
                        templateUrl: '../views/templates/partials/footer.html',
                    }
                },
                resolve: {
                    account:  function($timeout, accountFactory){
                        //Comment
                        return $http({method: 'GET', url: '/account.json'});
                     }
                },
                controller: ['$scope', 'account',  function($scope, account){
                    // You can be sure that promiseObj is ready to use!
                    $scope.data = account;
                    console.log('SCOPE!!!!!');
                }],
            })
            .state('app.accessory', {
                url: 'accessory',
                views: {
                    'content@': {
                        templateUrl: '../views/accessory/listing.html',
                        controller: 'accessoryListingCtrl',
                        controllerAs: 'vm'
                    }
                }

            })
    }]);

Answer 1

Your parent state config is not correct. When using multiple named views A controller does not belong to a state but to a view, so you should move your controller statement to the specific view declaration, or all of them if you need it everywhere.

See here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

$stateProvider
  .state('report',{
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      },
      'tabledata': {
        templateUrl: 'report-table.html',
        controller: function($scope){ ... controller stuff just for tabledata view ... }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope){ ... controller stuff just for graph view ... }
      },
    }
  })

Answer 2

I don't know why the controller does not get called. But you can start by making sure that resolve always return data.

resolve: {
    account:  function($timeout, accountFactory){
        //Comment
        return $http({method: 'GET', url: '/account.json'})
            .$promise.then(
                function(data) { return data; },
                function(error) { return error; });
    }
}