Show MODAL in onsen ui while data is fetching in angularjs

I am trying to fetch data from server. Since its fetching i want to show a modal till its not loaded completely.

Here is what i am using.

<ons-page ng-controller="directoryControl">

      <ons-modal var="modal">
        <ons-icon icon="ion-load-c" spin="true"></ons-icon>
        <br><br>
        Please wait.<br>Closing in 2 seconds.
      </ons-modal>

      <ons-list>

        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
          <ons-row>
            <ons-col>
              <div class="name">
                {{PostCategory.title}}
              </div>
            </ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>

There is how my modal looks like in angularjs.

var module = angular.module('app', ['onsen']);
    module.controller('directoryControl', function($scope, $http) {
    ons.ready(function() {

                    //console.log($scope.username + ", " + $scope.password);
                    modal.show();

                    var responsePromise = $http.get("http://www.mywebsitepadth.com/api/get_category_index/");
                    responsePromise.success(function(data, status, headers, config) {
                        modal.hide();
                    });
                    responsePromise.error(function(data, status, headers, config) {
                        alert("ajax didnt work");
                    });
        });
    });

May i know why this is not displaying the modal when i am doing it modal.show();?

Thank you!

Solution

Make your model direct child of body like this.

<body>
   <ons-modal var="modal">
        <ons-icon icon="ion-load-c" spin="true"></ons-icon>
        <br><br>
        Please wait.<br>Closing in 2 seconds.
      </ons-modal>

This way you'll be able to access modal anywhere in your any controller. Now your controller should be like this.

module.controller('directoryControl', function($scope, $http) {

                    //console.log($scope.username + ", " + $scope.password);
                    modal.show();

                    var responsePromise = $http.get("http://www.mywebsitepadth.com/api/get_category_index/");
                    responsePromise.success(function(data, status, headers, config) {
                        modal.hide();
                    });
                    responsePromise.error(function(data, status, headers, config) {
                        alert("ajax didnt work");
                    });
    });