Partial side menu in <ion-nav-view>

ionic-v1
1

Hi everybody, I want to make all the templates partial so my index.html is clean, below is my code:

index.html

<body ng-controller="MainCtrl">

    <ion-nav-view></ion-nav-view>

</body>

app.js

angular.module('RecipeBook', ['ionic', 'recipe.controllers', 'recipe.services'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

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

    $stateProvider
    
      .state('recipemenu', {
          url: "/recipeURL",
          abstract: true,
          templateUrl: "templates/event-menu.html"
      })

      .state('recipemenu.home', {
          url: "/home",
          views: {
              'menuContent': {
                  templateUrl: "templates/home.html"
              }
          }
      })

      .state('recipemenu.home/:recipeId', {
          url: "/recipe-detail/:recipeId",
          views: {
              'menuContent': {
                  templateUrl: "templates/home.html",
                  controller: 'RecipeDetailCtrl'
              }
          }
      })

      .state('recipemenu.all-recipe', {
          url: "/all-recipe",
          views: {
              'menuContent': {
                  templateUrl: "templates/all-recipe.html",
                  controller: "AllRecipeCtrl"
              }
          }
      })
      .state('recipemenu.add-recipe', {
          url: "/add-recipe",
          views: {
              'menuContent': {
                  templateUrl: "templates/add-recipe.html",
                  controller: "AddRecipeCtrl"
              }
          }
      })
      .state('recipemenu.edit-recipe/:recipeId', {
          url: "/edit-recipe/:recipeId",
          views: {
              'menuContent': {
                  templateUrl: "templates/add-recipe.html",
                  controller: "AddRecipeCtrl"
              }
          }
      })
      .state('recipemenu.about', {
          url: "/about",
          views: {
              'menuContent': {
                  templateUrl: "templates/about.html"
              }
          }
      })

    $urlRouterProvider.otherwise("/recipeURL/home");
});

I put all my html files inside /templates directory. My problem is the button menu not showing up by default, but if I slide it to the left, the menu is showing?