Using ionic Tabs directive inside a modal

I have an ionic modal window which serves as setting's menu plan is to use the modal with a small header and inside the content use the ion-tabs directive in a simple manner that each click shows and hide's a div

I've read the docs saying that they have a bug related to using the tabs inside a ion-content, so im aware of it.

how then can i achieve this funcionallity, if i remove the ion-content than the tabs directive is being pushed down instead of showing on top of the screen, here is the markup for the modal:

  <ion-modal-view>

<ion-header-bar style="background-color: #40863E">
     <h1 class="title" style="color:white;">My Account</h1>
     <div class="button button-clear" ng-click="closeModal()"><span class="icon ion-close"></span></div>
</ion-header-bar>

<ion-content>

         <ion-tabs class="tabs-icon-top tabs-positive">

              <ion-tab title="Message" icon-on=" ion-android-chat" icon-off="ion-ios7-filing-outline">
                <!-- Tab 1 content -->
              </ion-tab>

              <ion-tab title="Payment History" icon-on="ion-social-usd" icon-off="ion-ios7-clock-outline" on-select="showPayments()">
              </ion-tab>

              <ion-tab title="Edit" icon-on="ion-android-settings" icon-off="ion-ios7-gear-outline">
                <!-- Tab 3 content -->  
              </ion-tab>

               <ion-tab title="Sign Out" icon-on="ion-log-out" icon-off="ion-ios7-gear-outline">
                <!-- Tab 3 content -->
              </ion-tab>

        </ion-tabs>

<div id="payments" class="row" style="margin-top:43px;height:51px;">
some payments content
</div>

</ion-content>


  </ion-modal-view>

*UPDATE adding a picture to describe the problem