Angular material design mdToolbar and Ionic ion-nav-bar integration

I'm developing an app with Ionic and Angular Material. Now I'm struggling to get Ionics back button to work when it is used under the mdToolbar directive of angular material.

You can see the problem here: http://plnkr.co/edit/lfVVa4KAUkOFLOL1nQET

In index.html <ion-nav-bar> is located under the <mdToolbar> (line 59) tag and the back button and the title does not show up when navigating.

If the <ion-nav-bar> tag is listed anywhere else it works fine.

Any suggestions where the problem is and how to solve it?


While investigating this issue further it seems in ionic.bundle.js:48400 (function getAssoctiatedNavBarCtrl()) navBarDelegate is not initialized properly. But currently I have no idea why...

If you are interested in material-design, then I recommend you to use Angular-material + Cordova.

Here is yr plunk edited

You will have to reorganize yr base layout :

<body layout="column" ng-controller="AppCtrl" md-swipe-right="openSidenav('left')" md-swipe-left="closeSidenav('left')">
  <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
  </md-sidenav>

  <ion-nav-bar layout="column" class='bar-positive'>
  </ion-nav-bar>

  <div class="row" style="min-height:400px">
   <div layout="column" class="relative" layout-fill="" role="main">
    <md-toolbar>
    </md-toolbar>
    <md-content flex="" md-scroll-y="">
        <ion-nav-view layout="column" layout-fill="" layout-padding="" class="ui-view-container"></ion-nav-view>
     </md-content>
   </div>
  </div>
</body>