Cannot display fixed navbar inside slidebox abstract view

I have a abstract slide-box view which has one common header for all the slides.

.state('slidebox', {
  url: "/slidebox",
  abstract: true,
  templateUrl: "templates/slidebox_layout.html",
})

<ion-header-bar class="bar-balanced">
        <h1 class="title">Menu</h1>
        <button class="button">Menu</button>
</ion-header-bar> 
<ion-slide-box show-pager="false" active-slide="1">
  <ion-slide>
      <ion-nav-view name="menu-content"></ion-nav-view>
  </ion-slide>

  <ion-slide>
          <ion-nav-view name="main-content"></ion-nav-view>
  </ion-slide>
</ion-slide-box>

Only the header renders and not the slide-box. If I comment ion-header-bar slide-box renders properly. If I move ion-header-bar to index.html everything works perfectly.

this worked for me :

AbstractState.html

<ion-view>
  	<ion-nav-bar class="nav-title-slide-ios7 bar-light">
        </ion-nav-bar>
	<ion-nav-view name="slides"></ion-nav-view>
</ion-view>

ChildSlides.html

<ion-view title="Intro">
    <!--  optional to place <ion-nav-buttons> here -->
	<ion-slide-box  show-pager="true">
		<ion-slide ng-repeat="slide in data.slides">
			<div class="box" ng-include src="slide.template"></div>
		</ion-slide>
	</ion-slide-box>
</ion-view>

Configuration

 $stateProvider
  .state('abstract', {
  	url: "/abstract", 
  	abstract: true,
  	templateUrl: <your template>,
  })
  .state('abstract.slides', {
      url: "/slides",
      views : {
      	'slides' : {
      		templateUrl: <your template>
      	}
      }
  })

Ofcourse you need to add your controller and etc…