Ng-if doesn't resolve inside ion-nav-bar

ionic-v1
1

This is most my html code, I left out the left ion-side-menu part. The first div ng-if doesn’t work but the second one does. Why?

    <ion-side-menus enable-menu-with-back-views="false" ng-controller="AppCtrl">      
      <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button>
          </ion-nav-back-button>
    
          <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
          </ion-nav-buttons>
          <div ng-if="hasSidebar">
            <ion-nav-buttons side="right">
              <button class="button button-icon button-clear ion-more" menu-toggle="right">
              </button>
            </ion-nav-buttons>
          </div>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
      </ion-side-menu-content>

  <div ng-if="hasSidebar">

    <ion-side-menu side="right" ng-controller="SidebarCtrl">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Right</h1>
      </ion-header-bar>
      <ion-content>
        Sidebar Menu!
      </ion-content>

    </ion-side-menu>
  </div>

</ion-side-menus>
2

So it works as intended when I move the ng-if two lines below to the button. But still not when one line below to the ion-nav-buttons. Go figure…

3

Would you be able to provide a codepen to illustrate this?