Sticky states are reinitializing controller - tabs

Question

I have problems implementing sticky tabs where each tab can have multiple child states using ui-router-tabs and ui-router-extras.
When I open a state, move to annother and then go back to the first state, the corresponding controller is getting reinitialized (although the ui-router-extras debug output says it reactivated the state)
When I open another state of the same tab (sibling state), the debug output, the url and the request of the html template is telling me that the new state is loaded, but the tab is showing an empty content and the api call of the state is not executed
This is my state/route configuration:
$stateProvider
.state('home', {
url: '/',
templateUrl: 'modules/core/views/home.client.view.html'
})
.state('home.feed', {
abstract: true,
url: '',
template: '<div ui-view="list" ng-show="$state.includes(\'home.feed.list\')"/>'+
'<div ui-view="view" ng-show="$state.includes(\'home.feed.view\')"/>'+
'<div ui-view="profile" ng-show="$state.includes(\'home.feed.profile\')"/>',
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})
.state('home.feed.list', {
url: 'posts',
views: {
'list#home.feed': {
templateUrl: 'modules/posts/views/list-feed.client.view.html'
}
},
sticky: true
})
.state('home.feed.view', {
url: 'posts/:postId',
views: {
'view#home.feed': {
templateUrl: 'modules/posts/views/view-post.client.view.html'
}
},
sticky: true
})
.state('home.create', {
abstract: true,
url: '',
template: '<div ui-view="form" ng-show="$state.includes(\'home.create.form\')"/>',
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})
.state('home.create.form', {
url: 'create',
views: {
'form': {
templateUrl: 'modules/posts/views/create-post.client.view.html'
}
},
sticky: true
});
The "home" state is containing the ui-view for all tabs as well as the navigation bar. Each abstract state is representing a single tab and contains the named views for all its child states. The 3rd level of the states (e.g. home.feed.list) is representing the actual content.
//home
<div data-ng-controller="HomeController">
<ui-view></ui-view>
<div class="navbar navbar-fixed-bottom">
<tabs data="tabData" type="tabs" justified="true" template-url="modules/core/views/custom-tab-template.client.view.html"></tabs>
</div>
</div>
//home.feed.list
<section data-ng-controller="PostsController" data-ng-init="loadPosts()">
...
</section>
//home.feed.view
<section data-ng-controller="PostsController" data-ng-init="findOne()">
...
</section>
//home.create.form
<section data-ng-controller="PostsController">
...
</section>
The views are using the same controller, but I already tried to add a seperate controller for each view. Furthermore I tried to remove the ui-router-tabs and called the states by url, same result.
Example debug output for: home.feed.list -> home.create.form -> home.feed.list
(Sry not enough reputation to post pictures)
Current transition: : {}: -> home.feed.list: {}
Before transition, inactives are: : []
After transition, inactives will be: []
Transition will exit: []
Transition will enter: ["ENTER: home", "ENTER: home.feed", "ENTER: home.feed.list"]
SurrogateFromPath: []
SurrogateToPath: ["home", "home.feed", "home.feed.list"]
I am initializing PostsController
Current state: home.feed.list, inactive states: []
Views: (__inactives.locals) / (root.locals) / (home.locals: '#' (home)) / (home.locals: '#' (home)) / (home.feed.locals: '#home' (home.feed)) / (home.feed.list.locals: 'list#home.feed' (home.feed.list))
Current transition: home.feed.list: {}: -> home.create.form: {}
Before transition, inactives are: : []
After transition, inactives will be: ["home.feed", "home.feed.list"]
Transition will exit: ["(home)", "INACTIVATE: home.feed", "INACTIVATE: home.feed.list"]
Transition will enter: ["(home)", "ENTER: home.create", "ENTER: home.create.form"]
SurrogateFromPath: ["home", "inactivate:home.feed", "inactivate:home.feed.list"]
SurrogateToPath: ["home", "home.create", "home.create.form"]
I am initializing PostsController
Current state: home.create.form, inactive states: ["home.feed.list", "home.feed"]
Views: (__inactives.locals: '#home' (home.feed), 'list#home.feed' (home.feed.list)) / (root.locals) / (home.locals: '#' (home)) / (home.locals: '#' (home)) / (home.create.locals: '#home' (home.create)) / (home.create.form.locals: 'form#home.create' (home.create.form))
Current transition: home.create.form: {}: -> home.feed.list: {}
Before transition, inactives are: : ["home.feed.list", "home.feed"]
After transition, inactives will be: ["home.create", "home.create.form"]
Transition will exit: ["(home)", "INACTIVATE: home.create", "INACTIVATE: home.create.form"]
Transition will enter: ["(home)", "REACTIVATE: home.feed", "REACTIVATE: home.feed.list"]
SurrogateFromPath: ["home", "reactivate_phase1:home.feed", "reactivate_phase1:home.feed.list", "inactivate:home.create", "inactivate:home.create.form"]
SurrogateToPath: ["home", "reactivate_phase1:home.feed", "reactivate_phase1:home.feed.list", "reactivate_phase2:home.feed", "reactivate_phase2:home.feed.list"]
I am initializing PostsController
Current state: home.feed.list, inactive states: ["home.create.form", "home.create"]
Views: (__inactives.locals: '#home' (home.create), 'form#home.create' (home.create.form)) / (root.locals) / (home.locals: '#' (home)) / (home.locals: '#' (home)) / (home.feed.locals: '#home' (home.feed)) / (home.feed.list.locals: 'list#home.feed' (home.feed.list))
The same output is generated when I am using 3 different controllers ("I am initializing.." is executed on every controller).

Answer 1

I have found the mistakes:
Because the second level of states (home.feed and home.create) need to be sticky as well they need a named parent ui-view. I forgot to change the single ui-view inside of the home-html into two named ui-views.
And of course I had to adapt the state definitions:
.state('home.feed', {
url: '',
views: {
'feed#home': {
template: '<div ui-view="list" ng-show="$state.includes(\'home.feed.list\')"></div>'+
'<div ui-view="view" ng-show="$state.includes(\'home.feed.view\')"></div>'+
'<div ui-view="profile" ng-show="$state.includes(\'home.feed.profile\')"></div>'
}
},
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: {
default: { state: "home.feed.list" }
}
})
.state('home.create', {
abstract: true,
url: '',
views: {
'create#home': {
template: '<div ui-view="form" ng-show="$state.includes(\'home.create.form\')"></div>'
}
},
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})
This issue was caused by using div's with included closing tag. I changed this to the standard definition with a starting and closing tag (difference of the template definition above).