Tabs inside modal

ionic-v1
1

i am using some tabs inside the modal, this tabs are only within the modal and have their information there also, its getting better but not there yet.

look at this: http://ionicframework.com/docs/api/directive/ionTabs/, it has this note to not use ion-tabs inside ion-content because of some css bug but without it show me bad placed the data, seems and issue with the scrollable div, so i get rid of it with <ion-content scroll="false" and seem to work fine, it changes to the current tab info i got there but the only problem its that outside the modal is also redirecting to a tab and after that the tabs dissapear in the modal. Reading this http://ionicframework.com/docs/api/directive/ionTab/ this on-select on the tab maybe can be used like with preventDefault or something to not let operations outside the modal, i am not sure how to do this or the best way to do it.

<div class="modal">
  <ion-header-bar class="bar bar-header bar-positive">
    <h1 class="title">Informacion del Producto</h1>
    <div class="button button-clear" ng-click="modal.hide()"><span class="icon ion-close"></span></div>
  </ion-header-bar>
        <ion-content scroll="false" has-header="true">
  <ion-tabs class="tabs-positive tabs-icon-only">
    <ion-tab id="t1" title="Descripcion" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
      <!-- Tab 1 content -->
          <h2>{{information.name.language.__cdata}}</h2>
          <p>
          {{information.description.language.__cdata}}
          </p>
    </ion-tab>
          <ion-tab id="t2" on-select="alert('oe')" title="Color" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
            <!-- Tab 2 content -->
                <p> contenido 2 </p>
                <div ng-repeat="color in colors">
                   <input type="text" ng-model="color.color_name">
                </div>
          </ion-tab>
       
            <ion-tab id="t3" on-select="alert('oe')" title="Tallas" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
              <!-- Tab 3 content -->
                <p> contenido 3 </p>
                <div ng-repeat="size in sizes">
                   <input type="text" ng-model="size">
                </div>
            </ion-tab>
       
                </ion-tabs>
        </ion-content>
       
       
</div>
2

the problem basically is that when i selected the tabs inside the modal, outside the modal it was redirecting to some tab from the routes, and screwed all up and i just needed to change inside the modal to the inline content i wanted like the example http://ionicframework.com/docs/api/directive/ionTabs/.
At the end <ion-tab href="#" fixed that , if someone struggling with it, this is my code:

<div class="modal">
  <ion-header-bar class="bar bar-header bar-positive">
    <h1 class="title">Informacion del Producto</h1>
    <div class="button button-clear" ng-click="closeModal()"><span class="icon ion-close"></span></div>
  </ion-header-bar>

  <ion-content scroll="false" has-header="true" has-subheader="false" has-footer="false" overflow-scroll="false" on-refresh="onRefresh(
)" padding="true" > 
  <ion-tabs class="tabs-positive tabs-icon-only">
    <ion-tab href="#" title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" >
      <!-- Tab 1 content -->
          <h2>{{information.name.language.__cdata}}</h2>
          <p>
          {{information.description.language.__cdata}}
          </p>
    </ion-tab>

          <ion-tab href="#" title="Tab 2" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline"> 
            <!-- Tab 2 content -->
                <p> contenido 2 </p>
                <p> Colores Disponibles  </p>
                <div ng-repeat="color in colors">
                                <a href ng-click="getAvailableSizesByColor('{{color.color_name}}')" ng-model="color.color_name">{{color
.color_name}}</a>
                </div>
          </ion-tab>

            <ion-tab href="#" title="Tab 3" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
              <!-- Tab 3 content -->
                <p> Tallas disponibles </p>
                <p>
                        <div ng-repeat="size in sizes">
                                <a href ng-click="getAvailableColorsBySize('{{size}}')" ng-model="size">{{size}}</a>
                        </div>
                </p>
            </ion-tab>
       
                </ion-tabs>
        </ion-content>
       
       
</div>
3

Is there a reason you did not use <ion-modal-view> tag?