"Page Not Found" Error When Adding a Second <ons-template> tag

I'm brand new to Onsen UI and I'm busy working with an <ons-navigator> :

<body ng-controller="AppController">
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-navigator title="Navigator" var="myNavigator">

      <!-- Login Screen -->
      <ons-page>

        <div class="login-form" ng-controller="LoginController">
          <input type="text" class="text-input--underbar" placeholder="Membership Number" value="" ng-model="membershipNo">
          <input type="password" class="text-input--underbar" placeholder="Password" value="" ng-model="password">
          <br><br>
          <ons-button modifier="large" class="login-button">Log In</ons-button>
          <br><br>
          <ons-button modifier="quiet" class="register-link" onclick="myNavigator.pushPage('register', { animation : 'lift' } )">Register</ons-button>
        </div>

      </ons-page>
      <!-- Login Screen -->

      <!-- Register Screen -->
      <ons-template id="register">
        <ons-page>

          <div class="register-form" ng-controller="RegisterController">
            <input type="text" class="text-input--underbar" placeholder="Membership Number" value="" ng-model="membershipNo">
            <br><br>
            <ons-button modifier="large" class="register-button" onclick="myNavigator.pushPage('thanks', { animation : 'fade' } )">Register</ons-button>
          </div>

        </ons-page>
      </ons-template>
      <!-- Register Screen -->

      <!-- Thanks Screen -->
      <ons-template id="thanks">
        <ons-page>

          <div class="thanks-notification" ng-controller="RegisterController">
            <h1>Thanks!</h1>
            <h3>Your login credentials will be sent to you via SMS.</h3>
            <br><br>
            <ons-button modifier="large" class="ok-button">OK</ons-button>
          </div>

        </ons-page>
      </ons-template>
      <!-- Thanks Screen -->

    </ons-navigator>

</body>

Navigating from the login screen to the register screen works perfectly, however navigating then from the register screen to the thanks screen brings up the following error:

Error: Page is not found: thanks
    at Class.<anonymous> (onsenui.js:9703)
    at processQueue (angular.js:14567)
    at angular.js:14583
    at Scope.$get.Scope.$eval (angular.js:15846)
    at Scope.$get.Scope.$digest (angular.js:15657)
    at Scope.$get.Scope.$apply (angular.js:15951)
    at done (angular.js:10364)
    at completeRequest (angular.js:10536)
    at XMLHttpRequest.requestLoaded (angular.js:10477)

I've been playing around and it seems it happens just when you add a second ons-template to the navigator. Any ideas?

Solution

You should not put ons-template inside the navigator. The navigator should contain just one ons-page, everything else should be outside it.

HERE you can find a working CodePen example of your code (I removed the controllers).

Example of structure:

<ons-navigator var="myNav">
  <ons-page>
    ....
  </ons-page>
</ons-navigator>

<ons-template id="page1.html">
  <ons-page>
    ....
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    ....
  </ons-page>
</ons-template>

Alternative structure, using page attribute (which defines the page to show when navigator is initialized):

<ons-navigator var="myNav" page="main.html">
</ons-navigator>

<ons-template id="main.html">
  <ons-page>
    ....
  </ons-page>
</ons-template>

<ons-template id="page1.html">
  <ons-page>
    ....
  </ons-page>
</ons-template>

Also, note that ons-template can be used only in index.html.