OnsenUIのons-splitterについて

Monacaで開発をしているものです。
ons-splitter機能が搭載された初期サンプルを開くと、index.html内に前ページ内容が記載されていますが、個別のhtmlファイルに分けたいのですが

index.html内からほかのページに飛ぶ際、同ページ内にons-template id=””と記載されていないファイルは、読み込んでくれずエラーとなってしまいます。

ちなみに移動の処理は以下です。

<ons-list-item ng-click="app.load('hoge.html')" tappable>

補正
以下がファイルとなります。この中の <ons-template id="mainhome.html">となっている箇所を別のファイルに移したいのですが、うまくいきません。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">

  <script>
     var app = angular.module('myApp', ['onsen']);
      app.controller('AppController', function($scope) {
        this.load = function(page) {
          $scope.splitter.content.load(page);
          $scope.splitter.left.close();
        };

        this.toggle = function() {
          $scope.splitter.left.toggle();
        };
      });

    ons.ready(function() {
        console.log("Onsen UI is ready!");
    });
  </script>
</head>

<body>

  <ons-splitter ng-controller="AppController as app" var="splitter">
    <ons-splitter-side side="left" width="220px" collapse swipeable>

      <ons-page>      
        <ons-list>
          <ons-list-item ng-click="app.load('mainhome.html')" tappable>
            メインページ
          </ons-list-item>
          <ons-list-item ng-click="app.load('chat.html')" tappable>
            ログイン中
          </ons-list-item>
          <ons-list-item ng-click="app.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    
    </ons-splitter-side>
    <ons-splitter-content page="mainhome.html"></ons-splitter-content>
  </ons-splitter>

  <ons-template id="mainhome.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          メインページ
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>


<ons-template id="chat.html">
。。。