Return to Answer

1. Firstly, we are using the ui-router so we cannot use the <div ng-controller="TabsCtrl">. We do have states now, and each state can have more views, which DO have their own controllrs (i.e. controller belongs to view beeing part of a state)

2. As just explained, views do have controller (exactly one). Not states - they do NOT have controllers. So I moved the controller definition from state, into view...

    .state('home.summary', { url: '/summary', // NOT HERE views: { 'summary': { ... controller: 'SummaryCtrl', } } }) .state('home.summary.detail', { url: '/detail/:id', // NOT HERE views: { 'detail@home': { ... controller: 'DetailCtrl', 

3. resolve of the parent and child should have different names. I changed the child resolve like this (see mainyl the name load2 instead of load):

    .state('home.summary.detail', { url: '/detail/:id', views: { 'detail@home': { ... resolve: { load2: function($rootScope, $stateParams) { return 'loaded child with param ' + $stateParams.id ; } }, } 

4. Even if we want to have that: ui-view cannot be inside of the repeater. Well it can, but it would simply mean that the state view would be placed there as many times as repeated (but see the links below .. how to do that)

• how to use ui-router to change detail info inside of the repeater
• how the absolute view naming works revealed

1. Firstly, we are using the ui-router so we cannot use the <div ng-controller="TabsCtrl">. We do have states now, and each state can have more views, which DO have their own controllrs (i.e. controller belongs to view beeing part of a state)

2. As just explained, views do have controller (exactly one). Not states - they do NOT have controllers. So I moved the controller definition from state, into view...

    .state('home.summary', { url: '/summary', // NOT HERE views: { 'summary': { ... controller: 'SummaryCtrl', } } }) .state('home.summary.detail', { url: '/detail/:id', // NOT HERE views: { 'detail@home': { ... controller: 'DetailCtrl', 

3. resolve of the parent and child should have different names. I changed the child resolve like this (see mainyl the name load2 instead of load):

    .state('home.summary.detail', { url: '/detail/:id', views: { 'detail@home': { ... resolve: { load2: function($rootScope, $stateParams) { return 'loaded child with param ' + $stateParams.id ; } }, } 

4. Even if we want to have that: ui-view cannot be inside of the repeater. Well it can, but it would simply mean that the state view would be placed there as many times as repeated (but see the links below .. how to do that)

• how to use ui-router to change detail info inside of the repeater
• how the absolute view naming works revealed

1. Firstly, we are using the ui-router so we cannot use the <div ng-controller="TabsCtrl">. We do have states now, and each state can have more views, which DO have their controlelrs

2. As just explained, views do have controllers, not states, so I moved the controller definition from state, into view

    .state('home.summary', { url: '/summary', // NOT HERE views: { 'summary': { ... controller: 'SummaryCtrl', } } }) .state('home.summary.detail', { url: '/detail/:id', // NOT HERE views: { 'detail@home': { ... controller: 'DetailCtrl', 

3. resolve of the parent and child should have different names so I changed the child resolve liek this (see the load2 instead of load):

    .state('home.summary.detail', { url: '/detail/:id', views: { 'detail@home': { ... resolve: { load2: function($rootScope, $stateParams) { return 'loaded child with param ' + $stateParams.id ; } }, } 

4. Even if we want to have that... ui-view cannot be inside of the repeater. Well it can, but it would simply mean that the state view would be placed there as many times as repeated I moved thes ui-view outside of the repeater:

   {{tab.title}}

---

// moved outside of repeater

5. if we target the view not directly in parent, we have to use absolute naming, that's why I used this:

    .state('home.summary', { url: '/summary', views: { 'summary': { // ok name, while direct parent is home .... } } }) .state('home.summary.detail', { url: '/detail/:id', views: { 'detail@home': { // we have to add @home to say that the target .... // is in a home state not in our parent } } 

Few very interseting reading (I'd say) to really spend some time with:

• how to use ui-router to change detail info inside fo the repeater
• how the absolute view naming works explained

1. Firstly, we are using the ui-router so we cannot use the <div ng-controller="TabsCtrl">. We do have states now, and each state can have more views, which DO have their own controllrs (i.e. controller belongs to view beeing part of a state)

2. As just explained, views do have controller (exactly one). Not states - they do NOT have controllers. So I moved the controller definition from state, into view...

    .state('home.summary', { url: '/summary', // NOT HERE views: { 'summary': { ... controller: 'SummaryCtrl', } } }) .state('home.summary.detail', { url: '/detail/:id', // NOT HERE views: { 'detail@home': { ... controller: 'DetailCtrl', 

3. resolve of the parent and child should have different names. I changed the child resolve like this (see mainyl the name load2 instead of load):

    .state('home.summary.detail', { url: '/detail/:id', views: { 'detail@home': { ... resolve: { load2: function($rootScope, $stateParams) { return 'loaded child with param ' + $stateParams.id ; } }, } 

4. Even if we want to have that: ui-view cannot be inside of the repeater. Well it can, but it would simply mean that the state view would be placed there as many times as repeated (but see the links below .. how to do that)

I moved thes ui-view outside of the repeater:

<li tab ng-repeat="tab in tabs track by tab.id" active="tab.active" select="tab.select()"> <span tab-heading>{{tab.title}}</span> </li> <hr /> <div ui-view="detail"></div> // moved outside of repeater 

5. if we target the view, which is not placed directly in its parent, we have to use absolute naming, that's why I used this:

    .state('home.summary', { url: '/summary', views: { 'summary': { // ok name, while direct parent is home .... } } }) .state('home.summary.detail', { url: '/detail/:id', views: { 'detail@home': { // we have to add @home to say that the target .... // is in a home state not in our parent } } 

Few very interseting reading (I'd say):

• how to use ui-router to change detail info inside of the repeater
• how the absolute view naming works revealed

Few very interseting reading (I'd say) to really spend some time with:

• how to use ui-router to change detail info inside fo the repeater
• how the absolute view naming works explained