Ionic - Multiple view in same page - angularjs

Question

I am kind of a noob in Ionic and I need help / guidelines to build something that sounds easy.
I want to have a single page composed of multiple content, the idea is to have multiple views in the same page each of them being linked to a specific controller.
Here is my code:
index.html content:
<ion-pane>
<ion-nav-view></ion-nav-view>
<ion-view ng-controller="FirstController">
<ion-content>
</ion-content>
</ion-view>
<ion-view ng-controller="ScdController">
<ion-content>
</ion-content>
</ion-view>
</ion-pane>
In my app.js:
angular.module('app', [])
.controller('FirstController', function($scope) {
})
.controller('ScdController', function($scope) {
});
In my config.routes.js:
angular.module('app')
.config(configure);
function configure($stateProvider){
$stateProvider
.state('first', {
url: '/',
templateUrl: 'templates/first.html',
controller: 'FirstController'
})
.state('second', {
url: '/',
templateUrl: 'templates/second.html',
controller: 'ScdController'
});
}
Templates are very simple:
first.html:
<div>first</div>
second.html:
<div>Second</div>
Right now nothing is displayed.
What do you guys think?
Thanks for your help!

Answer 1

Your requirement is multiple named views.
Following document is useful to implement multiple views in a single page
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Example code:
HTML:
<ion-view title="">
<ion-content scroll="true">
<div ui-view="first"></div>
<div ui-view="second"></div>
</ion-content>
</ion-view>
JS:
angular.module('app')
.config(function($stateProvider) {
$stateProvider
.state({
name : 'multiple-views'
views: {
'first': {
url: '/',
templateUrl: 'templates/first.html',
controller: 'FirstController'
},
'second': {
url: '/',
templateUrl: 'templates/second.html',
controller: 'ScdController'
}
}
});
Working example link: http://plnkr.co/edit/kZZ4KikwLITOxR5IGltr?p=preview