title: AngularJS MetisMenu doesn't collapse the first time the page loads or after refresh
body: <p>I'm creating web admin website, I'm using AngularJS, Bootstrap-3 and the Metis Menu plugin of jQuery.</p>
  
  <p>I downloaded an open source bootstrap admin template, the template it's very simple, so I started adapting it so it could work like and single page AngularJS website.</p>
  
  <p>At first, the <code>MetisMenu</code> wasn't collapsing when I started to add <code>ng-include</code> directives to reduce the HTML code, I used and <code>ng-include</code> directive to include the sidebar menu part, and the footer and header parts, So I put this line in all of my controllers <code>$('#side-menu').metisMenu();</code> and it worked, but it doesn't work the first time I access the page or if I reload the page using F5.</p>
  
  <p>Example:</p>
  
  <p>If I go to <code>http://localhost/frontend/pages/index.html</code> the <code>MetisMenu</code>  doesn't show with the menu items or tabs collapsed and if I press the collapse icon it doesn't collapse the tabs it doesn't work in general. </p>
  
  <p>But if while I'm on that page I click a menu tab this tab takes me to <code>http://localhost/frontend/pages/index.html#/dashboard</code> and the <code>MetisMenu</code> works, the <code>MetisMenu</code> shows all the tabs collapsed and the tabs collapse icon works. I can go to all the pages in the menu and all the pages work fine. But if I refresh the page by pressing F5 the <code>MetisMenu</code> stops working, so I need to select again a menu option that would take me to <code>http://localhost/frontend/pages/index.html#/forms</code> or <code>http://localhost/frontend/pages/index.html#/anything</code> so the <code>MetisMenu</code> could work again.</p>
  
  <p>I believe that when I access a "#/any page fragment" the <code>MetisMenu</code> works because angular ngRoute call the controller and inside the controller I have this line <code>$('#side-menu').metisMenu();</code> that makes the <code>MetisMenu</code> works, but when I go back to the index.html is the browser that's taking me there without the ngRoute, the same happens when I refresh or reload the page the <code>$('#side-menu').metisMenu();</code> isn't getting called</p>
  
  <p>The only pages that I have it's my index.html and inside this page, I have a directive <code>ng-view</code> that shows the fragments of different pages when I call then like this "#/my fragment" because I'm trying to do a single page application</p>
  
  <p>Here are my routes, I'm using <code>ngRoute</code> to route my pages</p>
  
  <pre><code>angular.module('MyApp')
  .config(['$routeProvider', function($routeProvider) {
      $routeProvider.
      when('/forms', {
          templateUrl: '../angular/templates/userTemplates/createUser.html',
          controller: 'UsersCtrl'
      }).
      when('/dashboard', {
          templateUrl: '../angular/templates/dashboardTemplates/dashboardTemplate.html',
          controller: 'DashBoardCtrl'
      }).
      when('/', {
          templateUrl: '../angular/templates/dashboardTemplates/dashboardTemplate.html',
          controller: 'DashBoardCtrl'
      });
  }]);
  </code></pre>
  
  <p>Here is my angular Controller</p>
  
  <pre><code>angular.module('MyApp')
  .controller('UsersCtrl', ['$scope', function($scope) {
      $('#side-menu').metisMenu();
  }]);
  
  angular.module('MyApp')
  .controller('DashBoardCtrl', ['$scope', function($scope) {
      $('#side-menu').metisMenu();
  }]);
  </code></pre>
  
  <p>here is my jQuery file</p>
  
  <pre><code>$(function() {
  
  $('#side-menu').metisMenu();
  
  });
  
  //Loads the correct sidebar on window load,
  //collapses the sidebar on window resize.
  // Sets the min-height of #page-wrapper to window size
  $(function() {
      $(window).bind("load resize", function() {
          topOffset = 50;
          width = (this.window.innerWidth &gt; 0) ? this.window.innerWidth : this.screen.width;
          if (width &lt; 768) {
              $('div.navbar-collapse').addClass('collapse');
              topOffset = 100; // 2-row-menu
          } else {
              $('div.navbar-collapse').removeClass('collapse');
          }
  
          height = ((this.window.innerHeight &gt; 0) ? this.window.innerHeight : this.screen.height) - 1;
          height = height - topOffset;
          if (height &lt; 1) height = 1;
          if (height &gt; topOffset) {
              $("#page-wrapper").css("min-height", (height) + "px");
          }
      });
  
      var url = window.location;
      var element = $('ul.nav a').filter(function() {
          return this.href == url || url.href.indexOf(this.href) == 0;
      }).addClass('active').parent().parent().addClass('in').parent();
      if (element.is('li')) {
          element.addClass('active');
      }
  });
  </code></pre>
  
  <p>and here is my index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="MyApp"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;!-- ANGULAR --&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="../angular/app.js"&gt;&lt;/script&gt;
      &lt;script src="../angular/controllers/user/userController.js"&gt;&lt;/script&gt;
      &lt;script src="../angular/controllers/dashboard/dashboardController.js"&gt;&lt;/script&gt;
  
      &lt;script src="../angular/routes.js"&gt;&lt;/script&gt;
      &lt;title&gt;SB Admin 2 - Bootstrap Admin Theme&lt;/title&gt;
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;!-- MetisMenu CSS --&gt;
      &lt;link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet"&gt;
      &lt;!-- Timeline CSS --&gt;
      &lt;link href="../dist/css/timeline.css" rel="stylesheet"&gt;
      &lt;!-- Custom CSS --&gt;
      &lt;link href="../dist/css/sb-admin-2.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom Fonts --&gt;
      &lt;link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body ng-cloak&gt;
      &lt;div id="wrapper"&gt;
          &lt;!-- Navigation --&gt;
          &lt;nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0" ng-include="'../angular/templates/masterPageSecctions/navigationTemplate.html'"&gt;
          &lt;/nav&gt;  &lt;!-- here is where I include html code with a directive ng-include--&gt;
  
  
          &lt;div id="page-wrapper"&gt;
              &lt;div ng-view&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /#page-wrapper --&gt;
      &lt;/div&gt;
      &lt;!-- /#wrapper --&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="../bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- Metis Menu Plugin JavaScript --&gt;
      &lt;script src="../bower_components/metisMenu/dist/metisMenu.min.js"&gt;&lt;/script&gt;
       &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="../dist/js/sb-admin-2.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is the fragment that contains the metis menu</p>
  
  <pre><code>&lt;div class="sidebar-nav navbar-collapse"&gt;
  &lt;ul class="nav" id="side-menu"&gt;
      &lt;li class="sidebar-search"&gt;
          &lt;div class="input-group custom-search-form"&gt;
              &lt;input type="text" class="form-control" placeholder="Search..."&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button class="btn btn-default" type="button"&gt;
                      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;!-- /input-group --&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#dashboard"&gt;&lt;i class="fa fa-dashboard fa-fw"&gt;&lt;/i&gt; Dashboard&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;&lt;i class="fa fa-bar-chart-o fa-fw"&gt;&lt;/i&gt; Charts&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="nav nav-second-level"&gt;
              &lt;li&gt;
                  &lt;a href="flot.html"&gt;Flot Charts&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="morris.html"&gt;Morris.js Charts&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;!-- /.nav-second-level --&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="tables.html"&gt;&lt;i class="fa fa-table fa-fw"&gt;&lt;/i&gt; Tables&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#forms"&gt;&lt;i class="fa fa-edit fa-fw"&gt;&lt;/i&gt; Forms&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;&lt;i class="fa fa-wrench fa-fw"&gt;&lt;/i&gt; UI Elements&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="nav nav-second-level"&gt;
              &lt;li&gt;
                  &lt;a href="panels-wells.html"&gt;Panels and Wells&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="buttons.html"&gt;Buttons&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="notifications.html"&gt;Notifications&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="typography.html"&gt;Typography&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="icons.html"&gt; Icons&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="grid.html"&gt;Grid&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;!-- /.nav-second-level --&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;&lt;i class="fa fa-sitemap fa-fw"&gt;&lt;/i&gt; Multi-Level Dropdown&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="nav nav-second-level"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Second Level Item&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Second Level Item&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Third Level &lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="nav nav-third-level"&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Third Level Item&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Third Level Item&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Third Level Item&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Third Level Item&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- /.nav-third-level --&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;!-- /.nav-second-level --&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;&lt;i class="fa fa-files-o fa-fw"&gt;&lt;/i&gt; Sample Pages&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="nav nav-second-level"&gt;
              &lt;li&gt;
                  &lt;a href="blank.html"&gt;Blank Page&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="login.html"&gt;Login Page&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;!-- /.nav-second-level --&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>
  </p>