title: dynamic menu items using AngularJS
body: <p>Let's say I have the following menu structure:</p>
  
  <pre><code>    &lt;li class="dropdown"&gt;&lt;img role="button" class="dropdown-toggle" data-toggle="dropdown" ng-src="{{avatarUrl}}" /&gt;
        &lt;ul class="dropdown-menu pull-right" role="menu"&gt;
          &lt;li ng-hide="user"&gt;&lt;a ng-click="openLoginDialog()"&gt;Login&lt;/a&gt;&lt;/li&gt;
          &lt;li ng-show="user"&gt;&lt;a ng-click="logout()"&gt;Logout&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>I get the correct menu, but because I'm using ng-show/ng-hide, when I change <code>user = false;</code> programmatically in the controller, the login menu appears. I get why this is happening, but I'm not sure what approach to take when using Angular to prevent it. I tried an ng-repeat:</p>
  
  <pre><code>    &lt;li class="dropdown"&gt;&lt;img role="button" class="dropdown-toggle" data-toggle="dropdown" ng-src="{{avatarUrl}}" /&gt;
        &lt;ul class="dropdown-menu pull-right" role="menu"&gt;
          &lt;li ng-repeat="action in actions"&gt;&lt;a ng-click="{{action.command}}"&gt;{{action.name}}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>with:</p>
  
  <pre><code>$scope.actions = [ {
    name : "Login",
    command : "openLoginDialog()"
  }, {
    name : "Logout",
    command : "logout()"
  } ];
  </code></pre>
  
  <p>But with that strategy, nothing happens with I click the menu item. I'm not sure what the appropriate Angular approach is to what I'm sure is a pedestrian use case.</p>