Login form not showing up in app

I have following code in my index.html file:

<html>
<body>
<ons-navigator var = "myNavigator" page = "login.html"></ons-navigator>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
<ons-list-item onclick="fn.load('settings.html')" tappable>
Settings
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

<ons-template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Main
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Swipe right to open the menu!
</p>
</ons-page>
</ons-template>

<ons-template id="settings.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">

I simply added ons-navigator at the top and pointed it to my login.html file.

login.html file:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, 
initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: 
https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-
inline' 'unsafe-eval'">
<link rel="stylesheet" href="components/loader.css">
<script src="components/loader.js"></script>
<script>
</script>
</head>
<body>
<ons-page>
<div class="page center" ng-controller="LoginController">
<div class="row">
<div class="col">
<ons-text-input placeholder="id" ng-model="id">             
</ons-text-input>
</div>
</div>
<div class="row">
<div class="col">
<input type="password" placeholder="password" ng-model="password" 
class="topcoat-text-input">
</div>
</div>
<div class="row">
<div class="col">
<ons-button ng-click="login(id, password)">
Login
</ons-button>
</div>
</div>
</div>
</body>
</html>

login.js file:

function LoginController($scope){
$scope.login = function(id, password){
    $scope.ons.navigator.pushPage('login.html');
}
}

Upon loading the app in the Monaca debugger, the login page fails to show up. I am met with the main page and the tab bar, which I don't want at all. I did some research online to come up with the code. Another example on Monaca's website showed that the JS script just included on.boostrap(), but it was a bare app and I want the login page to appear upon launch everytime unless the user's credentials have been locally saved (working on that once I get this working.)

All feedback is most definitely appreciated!