Monaca を使ってアプリ開発しているのですが下の画像のようにツールバーの上に空白ができてしまいます。

画面 http://ryo110isa.main.jp/ios.png

Android の場合はこのようなことにはなりません。

いろいろやってみると、 AngularJS を使ったときだけ空白ができるようです。

ちなみに index.html は

<!DOCTYPE HTML>
<html  ng-app="myApp">
<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>
</head>

<body ng-controller = "Page1Ctrl">
    <ons-tabbar var="tabbar" >
        <ons-tabbar-item
            icon="home"
            label="ホーム"
            page="navigator/navigator1.html"
            active="true"></ons-tabbar-item>
        <ons-tabbar-item
            icon="fa-book"
            label="メニュー"
            page="navigator/navigator2.html"></ons-tabbar-item>
        <ons-tabbar-item
            icon="fa-star-o"
            label="クーポン"
            ng-click="on_search_btn()"></ons-tabbar-item>
        <ons-tabbar-item
            icon="fa-phone"
            label="予約"
            page="navigator/navigator4.html"></ons-tabbar-item>
    </ons-tabbar>
</body>
</html>

としております。

なぜでしょうか？素人で申し訳ございませんがご教授お願いいたします。