Onsen UIのタブバーテンプレートから開発を進めていますが
jQueryで要素にアクセスするのに困っています。
Monaca/Onsen UI/Angularjs 全て初心者で何を掲載するべきか分からないため
該当すると思われるコード箇所を記載致します。
他ページでは$(function () {〜による表示時のjQueryの実行もできています。

    // Controller
    function checkSettings() {
        var settings;
        settings = JSON.parse(window.localStorage.getItem('settings'));
        if (settings.use) {

        } else {
            window.localStorage.setItem('settings', JSON.stringify({
                use: true,
                email: 'test@example.com',
                site_display: true
            }));
            settings = JSON.parse(window.localStorage.getItem('settings'));
        }
        showSettings();
    }
function showSettings() {
        var settings;
        settings = JSON.parse(window.localStorage.getItem('settings'));
        console.log(settings);
        $("#settings_input_email").val(settings.email);
        var name = document.getElementById("settings_input_name").value;
        alert($("#settings_input_email").val());
        alert(name);
        settings_input_site_display.setChecked(settings.site_display); //Switch
    }
$(function () {
        checkSettings();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ons-list>

                    <ons-list-header>会員</ons-list-header>
                    <ons-list-item>
                        <ons-row align="center" style="">
                            <ons-col size="50%" style="text-align: left;">
                                <section style="">
                                    <div style="margin-top: 0;">メールアドレス</div>
                                </section>
                            </ons-col>

                        </ons-row>
                        <ons-row align="center">
                            <ons-col>
                                <section style="margin-bottom: 15px;">
                                    <input id="settings_input_email" type="text" class="text-input" ng-model="text" placeholder="email@example.com" style="display: block; width: 100%">
                                </section>
                            </ons-col>
                        </ons-row>
                        <ons-row align="center" style="">
                            <ons-col size="50%" style="text-align: left;">
                                <section style="">
                                    <div style="margin-top: 0;">表示名</div>
                                </section>
                            </ons-col>

                        </ons-row>
                        <ons-row align="center">
                            <ons-col>
                                <section style="margin-bottom: 15px;">
                                    <input id="settings_input_name" type="text" class="text-input" ng-model="text" placeholder="お名前" style="display: block; width: 100%">
                                </section>
                            </ons-col>
                        </ons-row>
                    </ons-list-item>

                    <ons-list-header>表示</ons-list-header>
                    <ons-list-item>
                        <ons-row align="center" style="">
                            <ons-col size="50%" style="text-align: left;">
                                <section style="">
                                    <div style="margin-top: 0;">サイトの表示</div>
                                </section>
                            </ons-col>
                            <ons-col>
                                <section style="text-align: right;margin-top: 10px;">
                                    <ons-switch var="settings_input_site_display" id="settings_input_site_display"></ons-switch>
                                </section>
                            </ons-col>
                        </ons-row>
                    </ons-list-item>

                </ons-list>

コード内で出力しているlocalstrageの内容は正常に動作しており、下記の通りです。

Object {use: true, email: "test@example.com", site_display: true}

エラー内容は下記の通りです。

TypeError: Cannot read property 'value' of null
at showSettings

表示後にコンソールから実行した下記のコードは問題なく動作しました

$('#settings_input_email').val();
document.getElementById('settings_input_email').value;
$('#settings_input_email').val('test');
document.getElementById('settings_input_email').value = 'test';

showSettings()関数内で console.log($("#settings_input_email").val()); を実行すると、undefinedが返却されます。

また、テンプレートから作成し、LocalKitにてjQueryを有効化しましたが
下記エラーも発生しており、これが原因ではないかと思っていますが
全てloaderにて読み込んでいるため解決策が分かりません。

Onsen UI require jqLite. 
Load jQuery after loading AngularJS to fix this error. 
jQuery may break Onsen UI behavior.

宜しくお願い致します。

追記

index.html に ons.bootstrap()、ons.ready()のみ記述していたため
個別のページに ons.ready()、deviceready を追記しました。

<script>
    document.addEventListener("deviceready", function () {
    ons.ready(function () {
        checkSettings();
    });
}, false);
</script>

iPhoneのデバッガー上のLogにのみエラーが出力されました。
Error: undefined is not an object (evaluting … の1行のみ読み取れました。

また、下記のコードだと実行出来ることが分かりました。

$(function () {
    setTimeout(function () {
        $("ons-button#call_button").trigger("click");
    }, 100);
});

<ons-button id="call_button" modifier="large light" onclick="checkSettings()">設定再読み込み</ons-button>