環境：Moanca for Visual Studio
Cordova 4.1.0
ONSEN UI 1.2.1
AngularJS: 1.3.0(ONSEN UI標準組み込み）
Android MonacaDebugger 3.2.0

サンプルのOnsen UI ナビ付 タブバーを元に以下のようなコードを書いていますが、ons-navigatorのデフォルトページpage1.html内部の#btnShowArchivesを取得するにはどうしたらいいでしょうか

index.html

<body>
    <ons-tabbar var="tabbar">
        <ons-tab
            icon="home"
            label="Home"
            page="navigator.html"
            active="true"></ons-tab>
        <ons-tab
            icon="gear"
            label="Settings"
            page="settings.html"></ons-tab>
    </ons-tabbar>
</body>

navigator.html

<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>

page1.html

<ons-button id="btnShowArchives" >
    Shuffle phone or push this button
</ons-button>

ここで、index.htmlから読み込んでいるmain.jsファイルに以下のようなコードを書いても反応しません。

document.addEventListener("deviceready", function () {
    var btnShowArchives = ons.findComponent('#btnShowArchives', document.body);
    btnShowArchives.on("click", function (event) {
        console.log('test');
    });
}, false);

以下の方法も試してみましたがエラーが出ます。

document.addEventListener("deviceready", function () {
    var btnShowArchives = document.getElementById("btnShowArchives");
    //error
    btnShowArchives.on("click", function (event) {
        console.log('test');
    });

}, false);

ons-navigatorのページ追加イベントを使うのかとも思いましたがこれも反応しません。

myNavigator.on("postpush", function (event) {
    console.log(event);
});

これに限らずOnsen UIのons-tabbarなどの複数ページ管理UIで、index.html以外に書かれてるオブジェクトの取得方法がいまいちわかりません(サンプルアプリにも載ってない)。

以上、よろしくお願いします。