title: how to make a dynamic sidebar in angularjs
body: <p>I have a template like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js"&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;
        &lt;/title&gt;
        &lt;meta name="description" content=""&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;!-- Place favicon.ico and apple-touch-icon.png in the root directory --&gt;
        &lt;!-- build:css styles/vendor.css --&gt;
        &lt;!-- bower:css --&gt;
        &lt;!-- endbower --&gt;
        &lt;!-- endbuild --&gt;
        &lt;!-- build:css(.tmp) styles/main.css --&gt;
        &lt;link rel="stylesheet" href="styles/main.css"&gt;
        &lt;!-- endbuild --&gt;
     &lt;/head&gt;
     &lt;body ng-app="opencubesDashboardApp"&gt;
        &lt;div class="ui inverted fixed transparent main menu" &gt;
           MENU
        &lt;/div&gt;
  
        &lt;ng-view&gt;
        &lt;/ng-view&gt;
        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="//cdn.jsdelivr.net/semantic-ui/0.18.0/javascript/semantic.min.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/0.18.0/css/semantic.min.css"&gt;
  
        &lt;!-- build:js scripts/vendor.js --&gt;
        &lt;!-- bower:js --&gt;
        &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
        ...
        &lt;!-- endbower --&gt;
        &lt;!-- endbuild --&gt;
        &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
        &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
        ...
        &lt;script src="scripts/controllers/mod.js"&gt;&lt;/script&gt;
        &lt;!-- endbuild --&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is that the main menu can change or not according to the view. Example:</p>
  
  <ul>
  <li><code>/mod/:slug</code> route contains tabs <kbd>Overview</kbd> (selected), <kbd>Stats</kbd>, <kbd>Edit general</kbd>, <kbd>Edit body</kbd> and <kbd>Actions</kbd></li>
  <li><code>/mod/:slug/stats</code> route contains tabs <kbd>Overview</kbd>, <kbd>Stats</kbd> (selected), <kbd>Edit general</kbd>, <kbd>Edit body</kbd> and <kbd>Actions</kbd></li>
  <li><code>/mod/:slug/edit/general</code> route contains tabs <kbd>Overview</kbd>, <kbd>Stats</kbd>, <kbd>Edit general</kbd> (selected), <kbd>Edit body </kbd> and <kbd>Actions</kbd></li>
  <li>...</li>
  <li><code>/user</code> route contains tabs <kbd>Overview</kbd> (selected), <kbd>Stats</kbd>, <kbd>Edit profile</kbd> and <kbd>Actions</kbd></li>
  <li>...</li>
  </ul>
  
  <p><strong>Is there a clean way to manage this easily?</strong></p>