Problem: page with subheader ,ion-list and footer

Hi All,

I have a screen in my app which has the following tags in the same order

  1. Header

  2. Sub header

  3. Ion-list

  4. Footer


       <div class="tabs tabs-top tabs-virtual"class="bar-subheader">
                   <a href class="tab-item disable-user-behavior"
                       ng-class="{active: active_content=='details'}" ng-click="setActiveContent('details')">
                         <div class="buttons" >
                 <button class="button button-outline button-positive">Details</button>
               <a href class="tab-item disable-user-behavior"
                   ng-class="{active: active_content=='notes'}" ng-click="setActiveContent('notes')">
                  <div class="buttons" >
                   <button class="button button-outline button-positive">Notes</button>
       <ion-content class="has-subheader" padding="true"  ng-show="active_content=='details'">
                <!-- detail page -->
                          <ion-item   ng-repeat="title in titles" >
                               <p><b>{{title}}</b> {{values[$index]}}</p>
      </ion-content >
       <ion-footer-bar class="bar-stable" ng-show="active_content=='details'" >
                  <div class="buttons" ng-click="alarmAcknowlegde()">
                    <button class="button button-clear button-positive">Acknowlegde</button>
                   <h1 class="title"><!-- to align other button on right side  --></h1>
                   <div class="buttons" ng-click="alarmClear()" side="right">
                 <button class="button button-clear button-positive">Clear</button>

Problem : Footer is attached to subheader on the top
Please help
Thanks in Advance

Fixed the issue by using <ion-header-bar> for sub header