Using onsen ui split-view with multiple controllers - onsen-ui

Question

I am having a problem using my angular js controller on more than one ons-template using split-view navigation.
On the main page it works well, but when i load the second ons-template (that uses the same controller) on the main page it does not work at all.
Please help.
`
<ons-split-view
var="app.splitView"
secondary-page="menu.html"
main-page="search.html"
main-page-width="70%"
collapse="width 500px">
</ons-split-view>
<ons-template id="menu.html">
<ons-page style="background-color: white; border-right: 1px solid #ddd;">
<ons-toolbar>
<div class="center">Menu</div>
</ons-toolbar>
<ons-list>
<ons-list-item
modifier="tappable"
ng-click="app.splitView.toggle(); app.splitView.setMainPage('search.html');">
<i class="ion-search" style="color: #666"></i>
Search
</ons-list-item>
<ons-list-item
modifier="tappable"
onclick="app.splitView.toggle(); app.splitView.setMainPage('mostWanted.html');">
<i class="ion-person-stalker" style="color: #666"></i>
Most Wanted
</ons-list-item>
<ons-list-item
modifier="tappable"
ng-click="app.splitView.toggle(); app.splitView.setMainPage('stolenVehicles.html');">
<i class="ion-model-s" style="color: #666"></i>
Stolen Vehicles
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-navigator var="searchNavigator">
<ons-page ng-controller="searchCtrl">
<ons-toolbar>
<div class="center">
<i class="ion-search" style="color: #666"></i>
Search
</div>
</ons-toolbar>
<div style="text-align: center; padding: 60px 10px 10px 10px;">
<section style="padding: 8px">
<b>Enter ID Number</b>
</section>
<section style="padding: 0 8px 8px">
<input type="search" class="search-input" placeholder="Enter ID Number..." style="color:black" ng-model="idNumber"></input>
</section>
<section style="padding: 0 8px 8px">
<ons-button modifier="large" ng-click="getRecords();">Submit</ons-button>
</section>
</div>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="record.html">
<ons-navigator var="recordNavigator">
<ons-page ng-controller="searchCtrl">
<ons-toolbar>
<div class="center">
<i class="ion-clipboard" style="color: #666"></i>
Record
</div>
</ons-toolbar>
<div style="text-align: center; padding: 60px 10px 10px 10px;">
<h3>{{record.id}}</h3>
</div>
</ons-page>
</ons-navigator>
</ons-template>
`
JS:
app.controller('searchCtrl', function($scope,data){
$scope.record = null;
$scope.getRecords = function(){
for(var x=0; x<data.person.length; x++){
if($scope.idNumber == data.person[x].id){
$scope.record = data.person[x];
}
}
if($scope.record == null){
alert("No Criminal Record Found");
} else{
searchNavigator.pushPage('record.html');
//console.log($scope.record.id);
}
};
});

Answer 1

If you want the two pages to share the same controller, define the controller on the parent of the "ons-split-view" instead of each page. You can wrap the "ons-split-view" in a div.
For example;
<div ng-controller="searchCtrl">
<ons-split-view
var="app.splitView"
secondary-page="menu.html"
main-page="search.html"
main-page-width="70%"
collapse="width 500px">
</ons-split-view>
</div>