Ionic, how to set tab bar into header?

I'm trying to add tab bar under the header to produce result like this:

enter image description here

But without luck.

Tab bar is displayed under the header but has ugly margins (see image) and is not static, is scolling with scrolling view.

enter image description here

Could somebdoy tell to me what i'm doing wrong?

Thanks for any help.

Template code of the layout is the following:

<ion-view title="{{ 'RESULTS_BY_DAY' | translate }}">

    <ion-nav-buttons side="left">
        <button class="button button-icon icon  ion-chevron-left" ui-sref="home">
        </button>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart">
        </button>
    </ion-nav-buttons>

  <ion-content class="padding" ng-controller="DailyListCtrl">

<div class="bar bar-header bar-light">
  <!--tabbar-->
    <div class="tabs-striped tabs-background-positive tabs-light tabs-icon-left">
        <div class="tabs">
            <a class="tab-item active" ui-sref="daily-list" href="/#/daily-list">
                {{ 'DAYS' | translate }}
            </a>
            <a class="tab-item " ui-sref="weekly-list" href="/#/weekly-list">
                {{ 'WEEKS' | translate }}
            </a>
            <a class="tab-item " ui-sref="monthly-list" href="/#/monthly-list">
                {{ 'MONTHS' | translate }}
            </a>
        </div>
    </div>
</div>


      <!--WRITEOUT OVERAL STATS FOR DAYS -->
      <ion-list class="list" ng-init="setDateRange('today');" >

          <!--IF NO ITEM IS FOUND -->
          <ion-item class="listCenter" ng-if="listData.length == 0 || listData.length == null">
              <h2>{{ 'NO_DATA_FOUND' | translate }}</h2>
          </ion-item>

          <ion-item class="item" ng-repeat="listDataItem in listData">
                  <div class="listDateTimeBlock">
                    <div>{{listDataItem.DATE_FROM_DD}}</div>
                    <div>{{listDataItem.DATE_FROM_MM}}</div>
                  </div>
                  <div class="listSuccessRateBlock">
                    <h3>{{ 'APPOINTMENT_SUCCESS_RATE' | translate }}: {{listDataItem.SUCCESS_RATE}} %</h3>
                    <h4>{{ 'SUCCESS_RATE_SINCE_START' | translate }}: {{listDataItem.SUCCESS_RATE_SINCE}} %</h4>
                    <h4>{{ 'MY_DEFICIT' | translate }}: {{listDataItem.DEFICIT}} %</h4>
                  </div>
                  <div class="listInformationBlock">
                    <h3>{{ 'DIALS' | translate }} : {{listDataItem.DIALS_CNT}}</h3>
                    <h3>{{ 'CONVERSATIONS' | translate }} : {{listDataItem.CONVERS_CNT}}</h3>
                    <h3>{{ 'APPOINTMENTS' | translate }} : {{listDataItem.APPT_CNT}}</h3>
                  </div>
          </ion-item>

          <ion-infinite-scroll
                  ng-if="canLoadMore"
                  icon="ion-loading-c"
                  distance="10%"
                  on-infinite="setDateRange('past');">
          </ion-infinite-scroll>

      </ion-list>
  </ion-content>



</ion-view>

Refer to the docs in ionic official site: http://ionicframework.com/docs/components/#striped-style-tabs

Make sure you have .tabs-top in your tab header div, like this:

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
  <a class="tab-item active" href="#">
    <i class="icon ion-home"></i>
    Test
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    Favorites
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    Settings
  </a>
</div>

Then wrap your content parts with and add .has-tabs-top in the class, like:

<ion-content class="padding has-tabs-top">
    ...your content...
</ion-content>

Hope this helps.