Side Menu not working, toggleLeft function undefined

Hey,

i just starded learing Angular + Ionic today.
I tried to follow this tutorial: http://learn.ionicframework.com/videos/sidemenu/
and just bumped into my first problem.
I get this error when trying to open my Side Menu:

TypeError: Cannot read property 'toggleLeft' of undefined
at Scope.$scope.toggleLeftMenu (controllers.js:9)
at $parseFunctionCall (ionic.bundle.js:20264)
at ionic.bundle.js:52360
at Scope.$get.Scope.$eval (ionic.bundle.js:22320)
at Scope.$get.Scope.$apply (ionic.bundle.js:22419)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:52359)
at HTMLButtonElement.eventHandler (ionic.bundle.js:10933)
at triggerMouseEvent (ionic.bundle.js:2853)
at tapClick (ionic.bundle.js:2842)
at HTMLDocument.tapMouseUp (ionic.bundle.js:2912)

This is my index.html:

   <!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MainCtrl">
    <ion-nav-view>
        <ion-side-menus>
        <ion-side-menu-content>
        <div class="bar bar-header bar-positive">
        <button class="button button-icon icon ion-navicon" ng-click="toggleLeftMenu()"></button>
        <div class="h1 title">Test App</div>
        </div>
        </ion-side-menu-content> 
            <ion-side-menu side="left">
                <ion-list><ion-item>Test 1</ion-item></ion-list>
                <ion-list><ion-item>Test 2</ion-item></ion-list>
                <ion-list><ion-item>Test 3</ion-item></ion-list>
                <ion-list><ion-item>Test 4</ion-item></ion-list>
            </ion-side-menu>

        </ion-side-menus>

    </ion-nav-view>
  </body>
</html>

And this is my controllers.js:

angular.module('myApp', ['ionic'])
.controller('MainCtrl', ['$scope', function($scope, $ionicSideMenuDelegate) {
    $scope.toggleLeftMenu = function() {
        $ionicSideMenuDelegate.toggleLeft;
      }
    }]);

I hope that you guys can help me! Thanks in advance

I have the same problem.
Please use:
$ionicSideMenuDelegate._instances[0].toggleLeft();
it works, hope help you.

or you can just add menu-toggle=“left” inside your html file.

Thanks man, that worked for me. I still don’t know why just writing $ionicSideMenuDelegate.toggleLeft doesn’t work. I even log $ionicSideMenuDelegate and realized that it returned undefined.