title: Angular ui-router hide based on roles
body: <p>I'm using Angularjs with ui-router to navigate within my web app. I'm using Web Api as my backend. I used a tutorial from <a href="http://bitoftech.net/2015/01/21/asp-net-identity-2-with-asp-net-web-api-2-accounts-management/" rel="nofollow">Taiseer Joudeh </a> to implement authentication and authorization. now that part works great but now I want to hide menu items in the front-end based on the roles of the authenticated user. I have the following code in my state provider:</p>
  
  <pre><code>            $stateProvider
              .state("warehouse", {
                  abstract: true,
                  url: "/warehouse",
                  template: "&lt;ui-view/&gt;",
                  ncyBreadcrumb: {
                      label: "Warehouse"
                  }
              })
              .state("warehouse.manager", {
                  url: "/pt/manager",
                  templateUrl: "/App/Views/Warehouse/Pt/manager.html",
                  controller: "PtManagerController",
                  ncyBreadcrumb: {
                      label: "PT Beheer"
                  },
                  data: {
                      roles: ["Admin", "User", "Manager"]
                  }
              });
  </code></pre>
  
  <p>and the user data is stored in local storage which is retrieved like this in the controller:</p>
  
  <pre><code>$scope.currentUser = localStorageService.get("authorizationData");
  </code></pre>
  
  <p>My menu looks as follows:</p>
  
  <pre><code>            &lt;li&gt;
              &lt;a bs-dropdown aria-haspopup="true" aria-expanded="false" class="header-item-toggle"&gt;Warehouse &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                  &lt;!-- PTs --&gt;
                  &lt;li class="dropdown-header"&gt;PTs&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a ui-sref="warehouse.manager"&gt;PT Beheer&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>The roles for the user are accessable through $scope.currentUser.roles;
  But I really have no idea how to continue from here. Is there anybody that can help me or send me in the right direction? I've read some blog posts but they are very different from my solution and I'm not that experienced with Angular so I'm having trouble translating them to my situation.</p>
  
  <p>All help is much appreciated.</p>