onsen ui <ons-navigator>の中に<ons-template>を複数定義しようとしてハマった

angularjs onsenui

やりたかったこと

＜ons-navigator＞を使ってページ遷移を2パターンのページへそれぞれ遷移させたかった。
下記のように実装してみたのだがページ2へのリンクをおすとjsのエラーが発生して上手く動かなかった。ちなみにページ1へは遷移できた

js

var myApp = angular.module("myApp",["onsen"]);
myApp.controller("CtrMain"),function($scope) {
  $scope.showPage1 = function() {
    $scope.ons.navigator.pushPage("page1.html");
  }
  $scope.showPage2 = function() {
    $scope.ons.navigator.pushPage("page2.html");
  }
});

html

<ons-navigator>
  <ons-page id="CtrMain">>
    メインページ
    <a ons-click="showPage1()">ページ1へ</a>
    <a ons-click="showPage2()">ページ2へ</a>
  </ons-page>
  <ons-template id="page1.html">
    <ons-page id="CtrPage1">ページ1</ons-page>
  </ons-template>
  <ons-template id="page2.html">
    <ons-page id="CtrPage2">ページ2</ons-page>
  </ons-template>
</ons-navigator>

＜ons-navigator＞の中には＜ons-template＞は1つしか入れられない？

angular.jsもonsen uiも触りはじめたばかりなので記述が間違っているのだと考えて、ページ1の＜ons-template id="page1.html"＞をごっそり削除してみた。するとページ2へ遷移できた、、、

html

<ons-navigator>
  <ons-page id="CtrMain">>
    メインページ
    <a ons-click="showPage1()">ページ1へ</a>
    <a ons-click="showPage2()">ページ2へ</a>
  </ons-page>
  <ons-template id="page2.html">
    <ons-page id="CtrPage2">ページ2</ons-page>
  </ons-template>
</ons-navigator>

結局こうしたら動いた

マニュアルをながめていたら「もう１つの方法として＜script＞タグを用いてテンプレートを定義する」と書いてあったので試しに＜ons-template id=""＞を＜script type="text/ons-template" id=""＞の形にしてみたら動きました

html

<ons-navigator>
  <ons-page id="CtrMain">>
    メインページ
    <a ons-click="showPage1()">ページ1へ</a>
    <a ons-click="showPage2()">ページ2へ</a>
  </ons-page>
  <script type="text/ons-template" id="page1.html">
    <ons-page id="CtrPage1">ページ1</ons-page>
  </script>
  <script type="text/ons-template" id="page2.html">
    <ons-page id="CtrPage2">ページ2</ons-page>
  </script>
</ons-navigator>

つまり

＜script＞タグで定義したほうが良さそう
根本的に使い方間違っている可能性もありそうで悲しい、、、誰か詳しいかた。ご教授おねがいします