Monacaでナビゲーションバーに時間を表示するにはどうすればいいいですか。

Monacaのナビゲーションバーに時間を表示したいです。

Monacaでアプリ開発をしています。基本テンプレートのナビゲーションバーの部分に時刻を表示する方法がよくわかりません。
また、以下のコードでは何時何分何秒まで出てきますが、そのロジックがわからないのと、何時何分だけの表示にどうやってできるのか合わせて教えていただくと助かります。

該当のソースコード

html
1<ons-template id="home.html">
2    <ons-page>
3      <ons-toolbar>
4        <div class="left">
5          <ons-toolbar-button onclick="fn.open()">
6            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
7          </ons-toolbar-button>
8        </div>
9        <div class="center">
10          <!--ここに文字を書くとナビゲーションバーに反映されます-->
11    <h1 id="time"></h1>
12    <script>
13    time();
14    function time(){
15        var now = new Date();
16        document.getElementById("time").innerHTML = now.toLocaleTimeString();
17    }
18    setInterval('time()',1000);
19    </script>
20        </div>
21      </ons-toolbar>
22      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
23        Swipe right to open the menu!
24      </p>
25    </ons-page>
26  </ons-template>

ちなみに、下記のコードに問題はありません。

js
1    <h1 id="time"></h1>
2    <script>
3    time();
4    function time(){
5        var now = new Date();
6        document.getElementById("time").innerHTML = now.toLocaleTimeString();
7    }
8    setInterval('time()',1000);
9    </script>