How can I put button-bars under a nav bar from the tabs template and still have pull to refresh on a list below it?

I am trying to put a “button-bar” right below my “ion-nav-bar”. I need the ion-nav-bar because the app has many states (tabs), but in each tab I need to have 2 modes (Cook/Takeout). Below the button bars is an ion-list with pull to refresh. However, the button bars are coming above the list and the list starts just below the ion-nav-bar. How can I make the order be:
ion-nav-header
button-bars
ion-list
with the pull to refresh spinner, list etc. showing up below the button bars?

Here is my code (derived from the ionic starter template):

<ion-view view-title="Dishes">
  <ion-content>
    <div class="bar bar-header">
      <div class="button-bar">
	<a ng-click="selectTimePeriod(0)" class="button">Eat Out</a>
	<a ng-click="selectTimePeriod(1)" class="button">Eat In</a>
      </div>
    </div>
    
    <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
    </ion-refresher>
    <ion-list>
      <ion-item class="item-remove-animate item-thumbnail-left item-icon-right" ng-repeat="dish in dishes" type="item-text-wrap" href="#/tab/dishes/{{dish.id}}">
        <img ng-src="{{dish.thumbnail_img}}">
        <h2>{{dish.name}}</h2>
        <p>{{dish.lastText}}</p>

      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>