How to determine ons-modal shown state?

I'm using an ons-modal to show a loading text and spinner icon when the app is fetching some data. The code is as follows:

<ons-modal var="loadingModal">
  <ons-icon icon="ion-load-c" spin="true"></ons-icon>
  <br><br>
  Cargando...
  <br>
</ons-modal>

I can correctly show an hide it using loadingModal.show(); and loadingModal.hide();

But how would I know in Angular if it is shown or hidden?

Solution

Update

Apparently my not-so-elegant solution is not not so elegant after all :D

Here is a pull request that shows the method isShown() that should be available soon I guess

Internally the function looks similar to whats in this answer

isShown() {
  return this.style.display !== 'none';
}

Not a super elegant solution, but it works

if( $scope.loadingModal._element.css('display') == 'none'){
  // hidden now
}else{
  // visible now
}

<!doctype html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>Modal | Onsen UI</title>
    <link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/demo/styles/app.css"/>
    <link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsenui.css">
    <link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsen-css-components.css">

    <script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/angular/angular.js"></script>
    <script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/onsenui.js"></script>
    <script src="https://rawgit.com/OnsenUI/OnsenUI/master/demo/app.js"></script>
    <script>
      function check($el){
        return $el.css('display') === 'none' ? 'hidden' : 'visible';
      }
      angular.module('myApp').controller('PageController', function($scope) {
        $scope.open = function() {
          $scope.app.modal.show();
          alert(check($scope.app.modal._element));
          setTimeout(function() {
            $scope.app.modal.hide();
            alert(check($scope.app.modal._element));
          }, 2000);
        };
      });
    </script>
  </head>

  <body ng-controller="PageController">

    <ons-navigator>

      <ons-modal var="app.modal">
        <ons-icon icon="ion-load-c" spin="true"></ons-icon>
        <br><br>
        Cargando...
        <br>
      </ons-modal>

      <ons-toolbar>
        <div class="center">Modal</div>
      </ons-toolbar>

      <p style="text-align: center">
        <ons-button modifier="light" ng-click="open();">Open Modal</ons-button>
      </p>

    </ons-navigator>

  </body>
</html>