Walking by nested states in ui-router without reloading parent state - angularjs

Question

In my project many organizations. Each organization page contains two parts: header with some organization info, which must load only once, and tabs zone. For tabs i use nested states.
Now question: Can i walk by tabs without reloading organizationCtrl?
router.js
$stateProvider
.state('organization', {
url: '/organisations/:id',
templateUrl: 'organization/show.html',
controller: 'organizationCtrl'
})
.state('organization.bio', {
url: '/bio',
templateUrl: 'organization/bio.html',
controller: 'organizationBioCtrl'
})
.state('organization.bio', {
url: '/gallery',
templateUrl: 'organization/gallery.html',
controller: 'organizationGalleryCtrl'
});
organization/show.html
<ul>
<li ui-sref-active="selected">
<a ui-sref="organization.bio({ id: organization.id })">Bio</a>
</li>
<li ui-sref-active="selected">
<a ui-sref="organization.gallery({ id: organization.id })">Gallery</a>
</li>
</ul>

Answer 1

The state change is triggered even if some state-Param is changed. Therefore, until our user will navigate between bio and gallery of the same organisation {id} - the organizationCtrl won't be reloaded. In the moment when user will navigate to different organisation {id} ... new state change will be triggered and new organiaztionCtrl will be put in play.
But we can solve it. Here is a working plunker
We will split the organisation state into 2 (parent/child). One will be a base/root of the organisation without the dependency upon concrete organisation {id}. And that means - will be instantiated only once...
.state('base', {
abstract : true,
template: '<div ui-view=""></div>',
controller: 'baseCtrl'
})
.state('organization', {
parent : 'base',
url: '/organisations/:id',
controller: 'organizationCtrl'
...
})
.state('organization.bio', {
url: '/bio',
...
})
.state('organization.gallery', {
url: '/gallery',
...
});
And now navigating among these links:
<ul>
<li><a ui-sref="organization.bio( { id: 1 })">Orga1 - Bio</a></li>
<li><a ui-sref="organization.gallery({ id: 1 })">Orga1 - Gallery</a></li>
<li><a ui-sref="organization.bio( { id: 2 })">Orga2 - Bio</a></li>
<li><a ui-sref="organization.gallery({ id: 2 })">Orga2 - Gallery</a></li>
</ul>
will not resinstantiate the baseCtrl even if the {id} will be changed.
.controller('baseCtrl', function($scope,...) {
// pretty stable one
})
.controller('organizationCtrl', function($scope, ...) {
// changing with id change
})
Because the base state is abstract, it won't introduce anything into our current model, we only gain the baseCtrl...
Please, observe described behaviour in this working plunker