MonacaでOnsen UIを用いて開発しています。

アプリ画面上部右端にあるアイコンをタップすると、
setting.html
というページをpushPageするようにコーディングしています。

setting.htmlへ遷移した際に、setting.htmlにあるons-switchの初期状態を
データベースから読み込んだ値にしたいのですが、
反映させるタイミング、方法がイマイチわからず
ご教示いただければと思います。

過去スレによると、pushPage先で何かするときにはpushPage元でons.readyを使ったり、
AngularJSを使うのかな…となんとなく思っているのですが。。。

ちなみに、記載したコードには記述がありませんが、
データベースからの読み込みは、top.htmlにインクルードしたjsの中で、
ajaxを用いてjsonで取得しています。
(値が正常に取得できていることは確認済み)

以下、コード。

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script src="js/ncmb-2.0.0.min.js"></script>
    <script src="js/login.js"></script>
    <!-- <script></script> -->
    <script>
        ons.bootstrap();
    </script>
</head>
<body>
    <ons-navigator var="myNavigator" id="navi" page="login.html"></ons-navigator> 
</body>
</html>

login.html

<ons-page>
    <div class="login-form"><br><br>
        <input type="email" id="email" class="text-input--underbar" placeholder="メールアドレス" value="">
        <input type="password" id="password" class="text-input--underbar" placeholder="パスワード" value="">
        <br>
        <ons-button modifier="large" class="login-button" Onclick="login();" >ログイン</ons-button>
        <br><br>
    </div>
    <div id="message" class="login-message"></div>
</ons-page>

top.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script src="js/ncmb-2.0.0.min.js"></script>
    <!-- <script></script> -->
    <script>
        ons.bootstrap();
    </script>
</head>
<body>
    <ons-navigator var="myNavigator" id="navi">
        <ons-page>
            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center"></div>
                <div class="right"><ons-icon icon="ion-navicon" class="tab-setting" onclick="myNavigator.pushPage('setting.html')"></div>
            </ons-toolbar>
            <ons-list>
                <ons-list-item modifier="chevron" class="top-list-item-container">
                    <div class="top-list-item-left">
                        <img src="" class="product-img">
                    </div>
                    <div class="top-list-item-right">
                        <div class="top-list-item-content">
                            <div class="product-name">あいうえお</div>
                            <div class="devuser-name">鈴木一郎</div>
                            <div class="last-send">更新日：2016/01/08 11:11</div>
                        </div>
                    </div>
                </ons-list-item>
                <ons-list-item modifier="chevron" class="top-list-item-container">
                    <div class="top-list-item-left">
                        <img src="" class="product-img">
                    </div>
                    <div class="top-list-item-right">
                        <div class="top-list-item-content">
                            <div class="product-name">かきくけこ</div>
                            <div class="devuser-name">鈴木二郎</div>
                            <div class="last-send">更新日：2016/01/07 11:11</div>
                        </div>
                    </div>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-navigator>
</body>
</html>

setting.html

<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button></ons-back-button></div>
    <div class="center">設定</div>
  </ons-toolbar>
  <div class="settings-header">プッシュ通知</div>
    <ons-list modifier="inset" class="settings-list">
        <ons-list-item>プッシュ通知<ons-switch modifier="list-item"></ons-switch></ons-list-item>
    </ons-list>
</ons-page>