UI Router does not enter allowed value in single-level views

Question

I have the following state configuration:

$stateProvider .state('customer', { url: '/customers', templateUrl: 'app/components/customer/templates/main.tpl.html', views: { 'list': { templateUrl: 'app/components/customer/templates/list.tpl.html', controller: 'ListCtrl as ctrl' } }, resolve: { customerList: function ($stateParams, CustomerResource) { console.log('trying to resolve'); var list = CustomerResource.list($stateParams); return list; } } }) 

Here is the main template:

 <div class="container"> <div class="row"> <div ui-view="list" class="col-lg-4"/> <div ui-view="details" class="col-lg-8"/> </div> </div> 

I see on the console that angular is trying to resolve the dependency. But this dependency is never entered into the controller under views . What am I doing wrong here?

PS When I move views to some child state of type customer.test , the resolved dependency is injected as expected:

  .state('customer.test', { url: '/test', views: { 'list@customer': { templateUrl: 'app/components/customer/templates/list.tpl.html', controller: 'ListCtrl as ctrl' } } }) 

Answer 1

There is a working plunker

The problem here is not the resolution, but the introduction of the main template. This should be a state definition:

  .state('customer', { url: '/customers', //templateUrl: 'app/components/customer/templates/main.tpl.html', views: { '': { templateUrl: 'app/components/customer/templates/main.tpl.html' }, 'list@customer': { templateUrl: 'app/components/customer/templates/list.tpl.html', controller: 'ListCtrl as ctrl' } }, resolve: { customerList: function ($stateParams, CustomerResource) { console.log('trying to resolve'); var list = CustomerResource.list($stateParams); return list; } } }) 

so with them in the game:

 .controller('ListCtrl', ['$scope', 'customerList', function ($scope, customerList) { $scope.resolved = customerList }]) .factory('CustomerResource', function(){ return { list: function(params){return "Hello world"} } }) 

we see that the list is as follows:

 <div> <h3>list view</h3> {{resolved}} </div> 

will display Hello world

Tick here in action