Open sidemenu from a tab button

I want to open the sidemenu from a tab button. The console outputs 'open menu' so i know the service method is being called but it will simply not open the menu. Where am i going wrong?

This is my tabs.html

<ion-tabs class="tabs-super-top tabs-top tabs-icon-left tabs-striped">

    <ion-tab title="More" icon="icon ion-navicon" ng-click="openSideMenu()" >
    </ion-tab>

    <ion-tab title="Events" icon="icon ion-calendar" ui-sref="tab.events">
        <ion-nav-view name="tab-events" class="slide-left-right"  ion-side-menu-content></ion-nav-view>
    </ion-tab>

    <ion-tab title="Involved" icon="icon ion-checkmark-round" ui-sref="tab.involved">
        <ion-nav-view name="tab-involved" class="slide-left-right" ion-side-menu-content></ion-nav-view>
    </ion-tab>

    <ion-tab title="Networks" icon="icon ion-network" ui-sref="tab.networks">
        <ion-nav-view name="tab-networks" class="slide-left-right" ion-side-menu-content></ion-nav-view>
    </ion-tab>


</ion-tabs>

navigation.js module:

angular.module('navigationModule', [])
.controller('SideMenuController', function($scope, sideMenuService) 
{
    $scope.openSideMenu = function()
    {
        sideMenuService.openSideMenu('sideMenu');
    };
})


.service('sideMenuService', function($ionicSideMenuDelegate) {
    return {
        openSideMenu: function(menuhandle) 
        {
            console.log('open menu');
            return $ionicSideMenuDelegate.$getByHandle(menuhandle).toggleLeft();
        }
    }
})

;

I currently have my sidemenu in index.html:

<ion-side-menus side="left" delegate-handle="sideMenu">

    <!-- Center content -->
    <ion-side-menu-content>
        <ion-list>
            <ion-item nav-clear menu-close ng-click="login()">Login</ion-item>
            <ion-item nav-clear menu-close href="#/app/search">Search</ion-item>
            <ion-item nav-clear menu-close href="#/app/browse">Browse</ion-item>
            <ion-item nav-clear menu-close href="#/app/playlists">Playlists</ion-item>
        </ion-list>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left"></ion-side-menu>

    <!-- Right menu -->
    <ion-side-menu side="right"></ion-side-menu>

</ion-side-menus>

This is my state:

$stateProvider

    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/common/Tabs.html",
      controller: 'SideMenuController'
    })

You're passing false to .toggleLeft, which explicitly tells it not to open...

So just change it to .toggleLeft()

Fixed it. If anyone else stumbles here... html placement is the key.

Key is place the html within the ion-side-menu-content block like so.

<ion-side-menus delegate-handle="sideMenu">

    <!-- Center content -->
    <ion-side-menu-content>

        <ion-nav-bar class="bar-dark nav-title-slide-ios7">
            <ion-nav-back-button class="button-clear">
                <i class="ion-arrow-left-c"></i> Back
            </ion-nav-back-button>
            <h1 class="title"></h1>
            <div class="buttons pull-right">
                <button class="ion-search button icon button-clear" ng-click="openModal()"></button>
                <button class="ion-plus-circled button icon button-clear" ng-click="openModal()"></button>
            </div>
        </ion-nav-bar>

        <ion-tabs class="tabs-super-top tabs-top tabs-icon-left tabs-striped">

            <ion-tab title="More" icon="icon ion-navicon" ng-click="openSideMenu()" >
                <!-- <ion-nav-view name="tab-more" class="slide-left-right"></ion-nav-view> -->
            </ion-tab>

            <ion-tab title="Events" icon="icon ion-calendar" ui-sref="tab.events">
                <ion-nav-view name="tab-events" class="slide-left-right"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Involved" icon="icon ion-checkmark-round" ui-sref="tab.involved">
                <ion-nav-view name="tab-involved" class="slide-left-right"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Networks" icon="icon ion-network" ui-sref="tab.networks">
                <ion-nav-view name="tab-networks" class="slide-left-right"></ion-nav-view>
            </ion-tab>

        </ion-tabs>


    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
        <ion-list>
            <ion-item nav-clear menu-close ng-click="login()">Login</ion-item>
            <ion-item nav-clear menu-close href="#/app/search">Search</ion-item>
            <ion-item nav-clear menu-close href="#/app/browse">Browse</ion-item>
            <ion-item nav-clear menu-close href="#/app/playlists">Playlists</ion-item>
        </ion-list>
    </ion-side-menu>

    <!-- Right menu -->
    <ion-side-menu side="right"></ion-side-menu>

</ion-side-menus>