I am using [Ionic framework](http://ionicframework.com) to create an application.

I need to be able to reuse and change my app header so I declare my two different headers as directives using my working markup.

```
app.directive('headerSidebar', function(){
  return {
    templateUrl: 'templates/header-main.html',
    restrict: 'E'
  };
});

app.directive('headerBack', function(){
  return {
    templateUrl: 'templates/header-back.html',
    restrict: 'E'
  };
});

```

When I try to call the directives with `<header-sidebar></header-sidebar>` or `<header-back></header-back>` nothing happens.

My html is valid and my template urls are correct. I have tried changing the names of both my directives and my templates but nothing worked.

I am using the [Ionic sidebar layout](http://ionicframework.com/docs/api/directive/ionNavView/) and I call my directives inside my `ion-nav-view`:

```
 <body ng-app="starter">

    <ion-side-menus>

      <ion-side-menu-content>
        <ion-nav-view></ion-nav-view>
      </ion-side-menu-content>

      <sidebar></sidebar>

    </ion-side-menus>

  </body>

```

Any suggestions to how I could solve this or reorganize my code to better include the header bars?