初歩的な質問かもしれませんが、ご教授お願いいたします。

monacaでアプリ製作を考えています。
monacaの「master-detail」テンプレートを元にプロジェクトを作成しようと思っています。

データバインディングの観点からng-controllerを記述したいのですが、

<ons-page> に ng-controller="newCtrl" と記述し、
iPhoneのmonacaデバッガーで確認したところ、表示が崩れてしまい
クリックで詳細ページに飛ぶこともできません。

<ons-page> を <div> でくくり、 <div ng-controller="newCtrl"> としても結果は同じでした。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/app.js"></script>
  <script>
    ons.bootstrap();

  </script>
  <style>
    .item {
      padding: 10px;
      line-height: 1;
    }
    .item-thum {
      background-color: #ccc;
      width: 50px;
      height: 50px;
      border-radius: 4px;
    }
    .item-title {
      font-size: 15px;
      font-weight: 500;
    }
    .item-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.3;
      margin: 4px 0 0 0;
      padding: 0 30px 0 0;
    }
    .item-label {
      font-size: 12px;
      color: #999;
      float: right;
    }
  </style>
</head>


<body>    

  <ons-navigator page="list.html" var="app.navi"></ons-navigator>

  <ons-template id="list.html">
    <ons-page id="list-page" ng-controller="newctrl">
      <ons-toolbar>
        <div class="center">Master Details</div>
      </ons-toolbar>

      <ons-list>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">Item Title</span>
                <span class="item-label">4h</span>
              </header>
              <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">Another Item Title</span>
                <span class="item-label">6h</span>
              </header>
              <p class="item-desc">Ut enim ad minim veniam.</p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>

        <ons-list-item modifier="chevron" class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">Yet Another Item Title</span>
                <span class="item-label">1day ago</span>
              </header>
              <p class="item-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

  <ons-template id="detail.html">
    <ons-page id="detail-page">

      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Details</div>
      </ons-toolbar>

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item class="item">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">Title</span>
                <span class="item-label">Foobar</span>
              </header>
              <p class="item-desc">desc</p>
            </ons-col>
          </ons-row>
        </ons-list-item>

        <ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
          <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
          Add a note
        </ons-list-item>
      </ons-list>

      <ons-list style="margin-top: 10px">
        <ons-list-item class="item">
          <header>
            <span class="item-title">Lorem ipsum dolor sit amet</span>
          </header>
          <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </ons-list-item>
        <ons-list-item class="item">
          <header>
            <span class="item-title">Lorem ipsum dolor sit amet</span>
          </header>
          <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </ons-list-item>
        <ons-list-item class="item">
          <header>
            <span class="item-title">Lorem ipsum dolor sit amet</span>
          </header>
          <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </ons-list-item>
      </ons-list>

      <br>

    </ons-page>
  </ons-template>

</body>

</html>

理想はng-controllerの記述をしても表示が崩れない、クリックが機能することです。
解決策ご教授いただければ幸いです。
よろしくお願いいたします。