Getting side-menu and tabs working together

1

All my views are loaded into the mainContainer.html view which looks like:

<script id="mainContainer.html" type="text/ng-template">

    <ion-side-menus>

      <ion-pane ion-side-menu-content>
        <ion-nav-bar type="bar-positive" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back" animation="nav-title-slide-ios7">

        </ion-nav-bar>
        <ion-nav-view name="main"></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="left">
        <header class="bar bar-header bar-assertive">
          <div class="title">Side Menu</div>
        </header>
        <ion-content has-header="true">
          <ul class="list">
            <a class="item" ng-click="toggleMenu()">Item1</a>
            <a class="item" ng-click="toggleMenu()">Item2</a>
          </ul>
        </ion-content>
      </ion-side-menu>

    </ion-side-menus>


  </script>

I would hence expect that any view loaded into main would have a blue nav bar along with side-menu icon on the left.

Kindly check this plnkr and advice what I am doing wrong here:

http://plnkr.co/edit/XgxFA4ArC7dNrLGD18Tk?p=preview