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:
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">
    <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>
    <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
      <ion-item class="item-remove-animate item-thumbnail-left item-icon-right" ng-repeat="dish in dishes" type="item-text-wrap" href="#/tab/dishes/{{}}">
        <img ng-src="{{dish.thumbnail_img}}">