title: Show / hide menu according to user privilege
body: <p>I have a <strong>Ionic app</strong> which have tabs + menu, this problem is specific to menu.</p>
  
  <p>I define my side-menu in <strong>index.html</strong> like this</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="js/routes.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt;
      &lt;script src="js/directives.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body ng-app="app" animation="slide-left-right-ios7"&gt;
    &lt;div&gt;
  
  &lt;ion-side-menus enable-menu-with-back-views="false" data-componentid="side-menu21"&gt;
      &lt;ion-side-menu-content&gt;
          &lt;ion-nav-bar class="bar-assertive"&gt;
              &lt;ion-nav-back-button class="button-icon icon ion-ios-arrow-back"&gt; &lt;/ion-nav-back-button&gt;
  
              &lt;ion-nav-buttons side="left"&gt;
                  &lt;button class="button button-icon button-clear ion-navicon" menu-toggle="left"&gt;&lt;/button&gt;
              &lt;/ion-nav-buttons&gt;
  
              &lt;ion-nav-buttons side="right"&gt;
                  &lt;button class="button button-icon button-clear ion-android-notifications" menu-toggle="right" &gt;&lt;/button&gt;
              &lt;/ion-nav-buttons&gt;
  
          &lt;/ion-nav-bar&gt;
          &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-side-menu-content&gt;
  
      &lt;ion-side-menu side="left" id="side-menu21"&gt;
  
          &lt;ion-header-bar class="bar-assertive"&gt;
              &lt;div class="title"&gt;Menu&lt;/div&gt;
          &lt;/ion-header-bar&gt;
  
          &lt;ion-content padding="false" class="side-menu-left has-header"&gt;
  
              &lt;ion-list id="menu-list2" class=" " data-componentid="list2"&gt;
  
                  &lt;ion-item id="menu-list-item1" ui-sref="myProfile"&gt; 
                    &lt;i class="icon ion-person" &gt;&lt;/i&gt; My Profile &lt;/ion-item&gt;
  
                  &lt;ion-item id="menu-list-item15" ui-sref="broadcast "&gt; 
                    &lt;i class="icon ion-contrast" &gt;&lt;/i&gt; Broadcast &lt;/ion-item&gt;
  
              &lt;/ion-list&gt;
  
          &lt;/ion-content&gt;
  
      &lt;/ion-side-menu&gt;
  &lt;/ion-side-menus&gt;
  
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have a service which fires at <strong>login</strong> which bring me my authorities</p>
  
  <pre><code>{ "authorities": 
         [
           "myProfile","broadcast"
         ]
  }
  </code></pre>
  
  <p>that I later store in <strong>localstorage</strong> like this</p>
  
  <pre><code>window.localStorage.setItem("authority", data.authorities);
  </code></pre>
  
  <p>What I wish to do is, <strong>show or hide menu dynamically according to authorities I got from login?</strong></p>
  
  <p>for example in authorities if instead of <code>"myProfile","broadcast"</code> there is only <code>"myProfile"</code> then broadcast should not be shown in side-menu.</p>