How do I show multiple views in an abstract state template? - angularjs

Question

Using Angularjs UI-Router I'm trying to build a typical page with a main view and a side refine/filter results view.
I've forked the sample app and now modifying it to have a parent abstract state that displays the filters view and the main view so that I can share the data that the abstract state resolves.
The problem is I cannot get the filters view to appear without breaking the scope inheritance. If I add the 'views' param it breaks the scope so how can I get this to work?
Here's my code and Plunker
$stateProvider
.state('applications', {
abstract: true,
url: '/applications',
templateUrl: 'planning.html',
controller: function($scope){
$scope.planning = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
$scope.filterPlanning = function(data) {
var output = $scope.planning;
// test filter
output = $filter('filter')({ name: "Alice" });
return output;
}
},
/* this breaks the scope from being inherited by the child views
views: {
'': {
templateUrl: 'applications.html'
},
'filters#applications': {
templateUrl: 'applications.filters.html'
}
},*/
onEnter: function(){
console.log("enter applications");
}
})
child states:
.state('applications.list', {
url: '/list',
// loaded into ui-view of parent's template
templateUrl: 'planning.list.html',
onEnter: function(){
console.log("enter applications.list");
}
})
.state('applications.map', {
url: '/map',
// loaded into ui-view of parent's template
templateUrl: 'planning.map.html',
onEnter: function(){
console.log("enter applications.map");
}
})
applications.html
<div class="row">
<div class="span4">
<div ui-view="filters"></div>
</div>
<div class="span8">
<div ui-view></div>
</div>
</div>
I already have the list, map and filters views built as directives so I'm hoping once I can get this demo working I can swap them in relatively easily.

Answer 1

There is updated plunker
I would say, that the issue here is:
Any controller belongs to view not to state
so this is the adjusted code:
.state('applications', {
abstract: true,
url: '/applications',
// templateUrl and controller here are SKIPPED
// not used
// templateUrl: 'applications.html',
// controller: ...
views: {
'': {
templateUrl: 'applications.html',
controller: function($scope, $filter){
$scope.planning = [
{ id:0, name: "Alice" },
{ id:1, name: "Bob" }
];
$scope.filterPlanning = function(data) {
var output = $scope.planning;
// test filter
output = $filter('filter')({ name: "Alice" });
return output;
}
},
},
'filters#applications': {
templateUrl: 'applications.filters.html'
}
},
Check the doc:
Views override state's template properties
If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.
The plunker to check it in action