title: Sidebar toggle not working in angular material
body: <p>I wanted to build a simple template like Youtube with angular material. 
  But I am kinda stuck with a sidebar navigation issue. The following should be possible in the template
  1. The sidebar should be opened on load (depending on the size of the screen)
  2. If the browser is resized, the sidebar should autohide/show
  3. If the menu button on the top-left is clicked, the sidebar should toggle as a part of the page (and not an overlay). It can be an overlay only when the screensize is small enough.</p>
  
  <p>The menu button in the navigation bar and the sidebar are in different controllers. So I have written a factory to share the click event and its outcome</p>
  
  <p>The html code for the html is as below</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" /&gt;
      &lt;style&gt;
        .add-vertical-shadow{
          -webkit-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
          -moz-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
          box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
        }
  
      &lt;/style&gt;
  
      &lt;!-- Angular Material requires Angular.js Libraries --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"&gt;&lt;/script&gt;
      &lt;!-- Angular Material Library --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"&gt;&lt;/script&gt;
      &lt;!-- User js files here --&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
      &lt;/script&gt;
    &lt;/head&gt;
  
  &lt;body ng-app="mainApp" layout="column"&gt;
    &lt;div ng-cloak="" class="toolbardemoBasicUsage" layout="column"&gt;
  
      &lt;md-toolbar class="md-hue-2 add-vertical-shadow" ng-controller="navCtrl"&gt;
        &lt;div class="md-toolbar-tools"&gt;
          &lt;md-button class="md-icon-button" aria-label="menu" ng-click="toggleClicked()"&gt;
            &lt;md-icon aria-label="Menu" class="material-icons"&gt;menu&lt;/md-icon&gt;
          &lt;/md-button&gt;
  
          &lt;h2 flex="" md-truncate=""&gt;MyApp&lt;/h2&gt;
  
          &lt;md-button class="md-icon-button" aria-label="more_vert"&gt;
            &lt;md-icon aria-label="more_vert" class="material-icons"&gt;more_vert&lt;/md-icon&gt;
          &lt;/md-button&gt;
        &lt;/div&gt;
      &lt;/md-toolbar&gt;
  
      &lt;!-- this will contain the main body and the sidebar --&gt;
      &lt;md-content flex &gt;
        &lt;div layout="vertical" ng-controller="sidebarCtrl" layout-fill&gt;
  
          &lt;!-- Sidebar start --&gt;
          &lt;md-sidenav class="md-sidenav-left md-whiteframe-4dp" md-component-id="leftSideBar" md-is-locked-open="{{hide}}"&gt;
            &lt;form&gt;
              &lt;md-input-container&gt;
                &lt;label for="testInput"&gt;Test input&lt;/label&gt;
                &lt;input id="testInput" type="text" ng-model="data" /&gt;
              &lt;/md-input-container&gt;
            &lt;/form&gt;
          &lt;/md-sidenav&gt;
          &lt;!-- Sidebar end --&gt;
  
          &lt;!-- Main Body start --&gt;
          &lt;md-content flex layout-padding&gt;
            Main body
          &lt;/md-content&gt;
          &lt;!-- Main Body end --&gt;
        &lt;/div&gt;
      &lt;/md-content&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and the js file </p>
  
  <pre><code>var mainApp = angular.module('mainApp',['ngMaterial']);
  
  mainApp.factory('toggleSidebar', function($mdSidenav, $mdMedia){
    return {
      hide : $mdMedia('gt-xs'),
      toggle : function(sidebarElement){
        $mdSidenav(sidebarElement).toggle();
        this.hide = !this.hide;
      }
    };
  });
  
  
  mainApp.controller('navCtrl', function($scope, toggleSidebar) {
    $scope.toggleClicked = function(){
      toggleSidebar.toggle('leftSideBar');
      console.log('hide : ' + toggleSidebar.hide);
    }
  });
  
  mainApp.controller('sidebarCtrl', function($scope, toggleSidebar) {
    $scope.hide = toggleSidebar.hide;
  });
  </code></pre>
  
  <p>Any help is greatly appreciated.</p>