ui-router rendering ui-views in view templates - angularjs

Question

Just checking an approach for ui-router. Was sure it could do this but hitting some friction. I want my third template to render inside my 2nd template - but my controller is not even initialized for my 3rd state unless I define my ui-view in my 1st template.
Example code
Template 1 This is rendered from an MVC view
<div class ="animate-container" ng-app="uiRouter-Browse">
<div class="products-slide-animate" ui-view="cat1">
<div>
<div><a ui-sref="cat1({id:1})">1</a></div>
<div><a ui-sref="cat1({id:2})">2</a></div>
<div><a ui-sref="cat1({id:3})">3</a><div>
</div>
</div>
</div>
Template 2
<div>
<div class="row all-categories-wrapper">
<div class="col-xs-12 list-item">
<a href="#/" class="parent">
<i class="chevron-left"></i>
<div>All Categories </div>
</a>
</div>
</div>
</div>
<!--want 3rd template to render here -->
<div ui-view="cat2" class="products-slide-animate" autoscroll="false">
<div class="cat2-wrapper" ng-repeat="cat1 in data.Cat1s">
<div class="row">
<div class="col-xs-12 list-item">
<a ui-sref="cat2({id:{{cat1.ID}}, name:'{{cat1.UrlEncodedName}}'})">
<div class="list-item-text">{{cat1.Name}}</div>
<i class="chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
Template 3
<div>
//some content to render
</div>
My ui-router script
var browse = angular.module('uiRouter-Browse', ['ui.router', 'ngAnimate'])
.run(
['$rootScope', '$state', '$stateParams',
$rootScope.$on('$stateChangeSuccess',
function (event, toState, toParams, fromState, fromParams) {
console.log(toState.name);
console.log(fromState.name);
}
);
}]);
browse.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('cat1', {
url: '/cat1/:id?name',
views: {
'cat1': {
templateUrl: '/Template1.html',
controller: //Get some data and return
}
}})
.state('cat2', {
url: '/cat2/:id?name',
views: {
'cat2': {
templateUrl: '/Template2.html',
controller: //Get some data and return
}
}
});
}]);
Most if not all of the examples I see the entire ui-view is replaced, as opposed to partially being replaced - i.e. the rendering of template 3 in the ui-view in template 2.
So when click on the cat 1 links from template 1, it transitions to the next state, the controller is invoked and my animations are pretty.
When I click on a cat2 link, my state is invoked correctly but the controller is not fired. I then just animate back to my previous view/state.
If I place a ui-view="cat2" div in template 1 then the controller fires and my template renders. I just would like it to render within the ui-view in template2.
Thanks

Answer 1

While not sure if it will really suite to your needs, the reason and solution is in a different state definition, we need state nesting. We simply cannot have two "totally" independent states, and try to inject one into another. We have to make one of them Parent and one to be a Child:
Current scenario:
$stateProvider
.state('cat1', {
...
}})
.state('cat2', {
...
});
Both states are in this snippet on the same "root" level. If we would like to nest the cat2 into cat1 they must be defined like this:
$stateProvider
.state('cat1', {
... // this is a parent
}})
.state('cat1.cat2', {
... // this is a child
});
That will lead to url for a (sub)state cat2 to be built from both parent and its own:
#/'/cat1/:id/cat2/:id?name&nameurl',
but if we do not need Parent url part and its parameters we can use absolute url:
.state('cat2', {
url: '^/cat2/:id?name',
See:
Methods for Nesting States
Absolute Routes (^)