Onsen UI Menu Not Responding - onsen-ui

Question

I'm using the Onsen UI as a part of the Sensation App. I'm trying to duplicate a page and have duplicated the html pages, data.js, and app.js with the appropriate information. Whenever I launch the app to my phone, I try to click my new page. It doesn't load. I also can't open any other page on my sensation. Please help. Thanks!
//Data.JS
var sensationApp = angular.module('sensationApp');
// Home Data: Home page configuration
sensationApp.factory('Data', function(){
var data = {};
data.items = [
{
title: 'ABOUT BN',
icon: 'home',
page: 'aboutbn-master.html'
},
{
title: 'ABOUT ALPHA',
icon: 'university',
page: 'posts.html'
},
{
title: 'LINEAGE',
icon: 'sort-numeric-asc',
page: 'categories.html'
},
{
title: 'BNSTYLE',
icon: 'shopping-cart',
page: 'products.html'
},
{
title: 'BNTUNE',
icon: 'cloud-upload',
page: 'news.html'
},
{
title: 'BNVOLVED',
icon: 'users',
page: 'contact.html'
},
{
title: 'GALLERY',
icon: 'camera',
page: 'gallery.html'
},
{
title: 'EVENTS',
icon: 'calendar',
page: 'serverposts.html'
},
{
title: 'THE TORCH',
icon: 'fire',
page: 'categories.html'
}
];
return data;
});
sensationApp.factory('AboutBNData', function(){
var data = { url: 'http://bnorbeout.com/?json=get_category_posts&slug=events&' };
return data;
});
//home.html
<ons-navigator title="BNorBeOut" var="appNavigator">
<ons-page ng-controller="HomeController">
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button onclick="menu.toggleMenu()">
<ons-icon icon="bars">
</ons-toolbar-button>
</div>
<div class="center">BNorBeOut</div>
<div class="right">
<ons-toolbar-button onclick="appNavigator.pushPage('contact.html',{title: 'CONTACT US', animation: 'slide'})">
<ons-icon icon="envelope">
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<section style="padding: 0 10px 0 0;">
<center><img ng-src="img/BNLogo.png" alt="The House that Chapman Built"/></center>
</section>
<section class="home-grid">
<div class="grid-menu">
<div class="centering-and-alignment" ng-repeat="row in items | partition:3">
<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="showDetail(($parent.$index*row.length)+$index);">
<ons-icon style="color: #BB8B09" icon="{{item.icon}}"></ons-icon>
<div class="grid-menu-item-label">{{item.title}}</div>
</div>
</div>
</div>
<ons-list class="list-top">
<ons-list-header>BUY TICKETS</ons-list-header>
<ons-list-item modifier="chevron" ng-click="loadURL(http://tallahassee.moonevents.com/events/chillmatic-0)">
<ons-row>
<center><img ng-src="img/Chillmatic2015.jpg" alt="Chillmatic 2015"/></center>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<ons-list class="list-top">
<ons-list-header>CONTACT</ons-list-header>
<ons-list-item modifier="chevron" ng-click="appNavigator.pushPage('parameters-master.html')">
<ons-row>
<ons-col width="15%">
<ons-icon icon="level-up" fixed-width="true"></ons-icon>
</ons-col>
<ons-col class="left">
2115 S. Martin Luther King Jr. Blvd., Tallahassee, FL 32301
</ons-col>
</ons-row>
<ons-row>
<ons-col width="15%">
<ons-icon icon="level-up" fixed-width="true"></ons-icon>
</ons-col>
<ons-col class="left">
414-841-2407
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</section>
</ons-scroller>
</ons-page>
</ons-navigator>
//AboutBN-Master.html
<ons-page ng-controller="AboutBNController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Events</div>
</div>
</ons-toolbar>
<ons-pull-hook ng-action="load($done)" var="loader">
<span ng-switch="loader.getCurrentState()">
<span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
<span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
<span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
</span>
</ons-pull-hook>
<section style="padding: 10px;">
<ons-list class="status-bar feeds">
<ons-list-item>{{status_bar}}</ons-list-item>
</ons-list>
<ons-row style="padding: 10px 0 20px 0;">
<input type="search" placeholder="Search" class="search-input" ng-model="search">
</ons-row>
<div ng-repeat="post in getAboutBN()">
<ons-row style="padding: 0 0 20px 0;">
<ons-col>
<h3 class="title" ng-bind-html="post.title" ng-click="showSearchDetail($index)"></h3>
<a ng-click="showSearchDetail($index)">
<img class="post-teaser-image" ng-src="{{post.attachments[0].images.thumbnail.url}}" ng-show="{{post.attachments.length}}"/>
</a>
<p class="post-excerpt" ng-bind-html="post.excerpt"></p>
<ons-button class="post-teaser" modifier="quiet" ng-click="showSearchDetail($index)">Read more</ons-button>
</ons-col>
</ons-row>
</div>
<ons-list class="status-bar feeds">
<ons-list-item>{{status_bar}}</ons-list-item>
</ons-list>
<ons-row align="center">
<ons-col>
<ons-button ng-show="hasMoreItems()" ng-click="showMoreItems()" class="load-show-more"><i class="fa fa-angle-double-down more-icon"></i>Load more</ons-button>
</ons-col>
</ons-row>
<ons-row align="center" class="status-message">
<ons-col>
<span class="loading"><i class="fa fa-spin fa-circle-o-notch"></i> Loading</span>
<span ng-bind="msg"></span>
</ons-col>
</ons-row>
</section>
</ons-page>

Answer 1

I found out the issue. I had to name the controllers differently in app.js. The master controller should match the data throughout, and the detail control should only be referenced once.