Text is hidden under ionicModal's header bar

This is my modal:

Screen Shot 2016-01-19 at 9.31.24 AM.png834x324 11.1 KB

As you can see, the text is "Hello" and it's hidden right under header bar. Nothing changes when I resize the window to a smaller one (making the ionicModal fullscreen).

I tried fixing it by putting black borders around the text's <div> container so see if the container is hidden behind the header bar. It is not. I added class=has-header in <ion-content> but that didn't fixed anything. I added the same class to the <div> container but nothing also.

The code is below:

   <ion-modal-view>
     <ion-header-bar class="bar-positive">
          <h1 class="title">Modal</h1>
          <button type="button" class="button button-energized" ng-click="cancel()">Cancel</button>
     </ion-header-bar>
         <ion-content class="has-header">
             <div style="text-align: center; height: 50%; border: 1px solid black;" class="has-header">
                 <p style="font-size: 20rem;">{{ cupSizeDisplay }}</p>
             </div>
        </ion-content>
   </ion-modal-view>

I've only tested this on Firefox and Chrome (ionic serve) and an iOS Simulator iPhone 5.

I looked at the default Ionic properties using Firebug but couldn't find the cause of this. Anybody has any hints, fixes, or knows the cause?

Thanks.