How to override ion-header-bar programmatically?

Hi everyone!

How do I change the header bar based on a value of a scope variable?

The reason is that I need to change the theme for every type of posts and I can’t figure out how to inject the variable, since the ion-header-bar is been generated.

my code so far: (menu.html)

  <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
        <ion-nav-buttons side="left">
          <img class="img-logo" ng-src="{{promoBackColor.logo}}" ui-sref="app-promo.home">
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
          </button>
          <div class="notification-user" ng-if="badge">
            <span>!</span>
          </div>
        </ion-nav-buttons>
      </ion-nav-bar>
    <ion-nav-view name="menuContentPromo"></ion-nav-view>
  </ion-side-menu-content>

What I’ve tried:

  <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">

        <ion-header-bar style="background-color: {{promoBackColor.color}} !important">
        </ion-header-bar>
        <ion-nav-buttons side="left">
          <img class="img-logo" ng-src="{{promoBackColor.logo}}" ui-sref="app-promo.home">
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
          </button>
          <div class="notification-user" ng-if="badge">
            <span>!</span>
          </div>
        </ion-nav-buttons>
      </ion-nav-bar>
    <ion-nav-view name="menuContentPromo"></ion-nav-view>
  </ion-side-menu-content>

but Ionic generates a few ion-header-bars throughout my page so I can’t figure a way to accomplish this.

Any ideas? Thanks!