ionic sidemenu not showing up

I am using ionic framework's sidemenu project to build something on top of it. I have created this plunker to demonstrate my problem.

In the plunker, on the join page, when you click home, it shows blank screen. I can see that the HTML elements of sidemenu are all there, however, it doesnt showup on screen.

If I change my sidemenu with tabs, it works fine.

Does anyone know whats going on?

My sidemenu template looks like this:

<ion-side-menus>
  <ion-pane side-menu-content>
    <ion-nav-bar class="bar-dark nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-dark">
      <h1 class="title">Menu</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="home">
          Search
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

My states looks like this:

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

    .state('app', {
      //url: "/app",
      abstract: true,
      templateUrl: "tpl.tabs.html",
      controller: 'AppCtrl'
    })

    .state('join', {
      url: "/join",
      views: {
        '': {
          templateUrl: "tpl.join.html",
          controller: 'joinCtrl'
        }
      }
    })
    .state('home', {
      parent: 'app',
      url: "/app",
      views: {
        'home': {
          templateUrl: "tpl.home.html",
          controller:'homeCtrl'
        }
      }
    })
    .state('menu', {
      parent: 'app',
      url: "/menu",
      views: {
        'menuContent': {
          templateUrl: "tpl.home.html",
        }
      }
    })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/join');

  })

You had several misconceptions in your code here is how it works properly.
First of all, I recommend you to use the newest version of Ionic. Then make sure you use the 

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

and the parent/child view function of the ui-router with dot notation, for example:

$stateProvider
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "tpl.tabs.html",
    controller: 'appCtrl'
  })

  .state('app.join', {
    url: "/join",
    views: {
      'menuContent': {
        templateUrl: "tpl.join.html",
        controller: 'joinCtrl'
      }
    }
  });

I solved it myself. The problem was with the naming of views of the states, which should match with the ion-nav-view name in the abstract template.

The updated solution is here