Side Menu Not Working Here's My Code

I have looked up tutorials and videos on how to get the sidemenu to work but mine isn’t working here’s the code segments

	.state('abs', {
    url: '/index',
    abstract: true,
	templateUrl: 'index.html',
	controller: 'newCtrl'
	.state('menu', {
    url: '/menu',
	abstract: true,
	views: {
		'menuContent': {
				templateUrl: 'sideMenuLeft.html'
	.state('abs.home', {
    url: '/homePage',	
    views: {
      'homePageContent': {
        templateUrl: 'homePage.html',
        controller: 'homePageCtrl'

as you can see I have defined an abstract for my menu along with my other states. My sideMenuLeft.html looks like this

<ion-side-menus enable-menu-with-back-views="false">

  <!-- Main content, usually <ion-nav-view> -->  
		<ion-nav-bar class="bar bar-calm myCustomBar" align-title="center">
		<ion-nav-buttons side="left">
			<button class="button button-clear" menu-toggle="left" ng-click="toggleLeft()"><i class="icon ion-android-menu"></i></button>
		<!--<ion-nav-back-button class="button-clear">
			<i class="ion-arrow-left-c"></i> Back
		<ion-nav-buttons side="right">
			<button class="button button-clear" ngclick="rightyClick()"><i class="icon ion-gear-a"></i></button>

	<ion-nav-view name="menuContent"></ion-nav-view>

	<ion-side-menu side="left">
		<ion-header-bar class="bar-stable">
			<h1 class="title">Left</h1>
				<ion-item menu-close ng-click="login()">
				<ion-item menu-close href="#/app/search">
				<ion-item menu-close href="#/app/browse">
				<ion-item menu-close href="#/app/playlists">


What am I doing incorrectly?


I thought I would quickly respond as I know how frustrating these things can be. I think you need to have a read of the ui-router docs ( as you have got a little confused with named views.

Your issue is that you are trying to nest sideMenuLeft into menuContent which is a named view in itself i.e. sideMenuLeft. What I would do is transfer your sideMenuLeft.html code into index.html (the root view), remove your ‘menu’ state and then change your ‘abs.homepage’ state to be:

.state(‘abs.home’, {
url: ‘/homePage’,
views: {
‘menuContent’: {
templateUrl: ‘homePage.html’,
controller: ‘homePageCtrl’

As you have a state of abs.home this is going to be a child view therefore you need to reference a named view in the parent view.


Thanks Hawkeye, yes this is quiet frustrating, will try this now.

PS. Looking forward to seeing you in civil war :wink: