Change states without reloading common view, angular ui-router. - angularjs

Question

Summery - I have two states. Both of them have two views in them col1 and col2. In both states col1 has same templateUrl i.e. FirstTemplate.html.
Question - How can I change from state one to state two without reloading FirstTemplate.html.
I have done this by making state two a child of state one and it is working fine that way, but I find it to be an incomplete solution since parent-child structure is not suitable for me in some scenarios.
$stateProvider
.state('one',{
views: {
'col1': {
templateUrl: 'FirstTemplate.html'
},
'col2': {
templateUrl: 'SecondTemplate.html'
}
},
.state('two',{
views: {
'col1': {
templateUrl: 'FirstTemplate.html'
},
'col2': {
templateUrl: 'ChangedTemplate.html'
}
}
})

Answer 1

I think the best solution might be to use a parent abstract state, like on this way:
.state( 'parent', {
abstract : true,
templateUrl : 'FirstTemplate.html'
})
.state( 'parent.one', {
templateUrl : 'SecondTemplate.html',
})
.state( 'parent.two', {
templateUrl : 'ChangedTemplate.html',
})
And, in order to yield both children views, you have to add this on FirstTemplate:
<div ui-view></div>
I think this will solve your problem.
PS: you need to specify also the url on the states

Answer 2

You'll need a hierarchical state structure, but both views have the same parent.
$stateProvider
.state('root', {
abstract: true,
url: '/root',
views: {
'col1': {
templateUrl: 'FirstTemplate.html',
controller: function($scope) {
$scope.lastUpdate = new Date();
}
}
}
}).state('root.one', {
url: '/one',
views: {
'col2': {
templateUrl: 'SecondTemplate.html',
controller: function($scope) {
$scope.lastUpdate = new Date();
}
}
}
})
.state('root.two', {
url: '/two',
views: {
'col2': {
templateUrl: 'ChangedTemplate.html',
controller: function($scope) {
$scope.lastUpdate = new Date();
}
}
}
});
Plunker