angularjsのpromise処理を使用時に、onsen ui のmodalが表示されずに悩んでいます。
Controllerでサービスの終了を待つ間、onsen uiのmodalを表示させたいのですが、うまくいきません。修正点がありましたら、ご教授いただければと思います。

コードは以下の通りです。10秒かかるサービスをまって、文字列を表示するサンプルです。

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">
    <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">
    <script src="js/app.js"></script>
</head>
<body>
<ons-modal var="myModal">
    MODALを表示中…
</ons-modal>
<ons-page ng-controller="MainController">
    <h1>Modal test</h1>
    <div>{{str}}</div>
</ons-page>
</body>
</html>

app.js

// This is a JavaScript file

console.log("Javascript Start ---------------------------" + Date());

// AngularJS + OnsenUI
var app = angular.module("myApp", ["onsen"]);

// 時間がかかる処理
app.factory("jikanKakaruFactory", ["$q" ,"$timeout", function($q, $timeout) {
    return {
        getString: function() {

            var d = $q.defer();

            $timeout(function() {
                d.resolve("処理が終了しました。" + Date());
            },10000);

            return d.promise;
        }
    };
}]);

// コントローラー
app.controller("MainController", ["$scope", "$q", "jikanKakaruFactory", function($scope, $q, jikanKakaruFactory) {

    // モーダル表示
    myModal.show();

    // 時間がかかる処理
    jikanKakaruFactory.getString()
        .then(function(str) {
            $scope.str = str;
        });

    // モーダル非表示
    myModal.hide();
}]);