title: Dynamic dropdown menu Angular and Bootstrap
body: <p>Trying to create a dynamic dropdown menu for a button. Preloading the menu from server as json and that part works fine but for some reason bootstrap doesn't display the menu items except for the last in the array.</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt; 
          &lt;span class="glyphicon glyphicon-camera"&gt;&lt;/span&gt; Select images to view &lt;b class="caret"&gt;&lt;/b&gt;
      &lt;/button&gt;
      &lt;ul ng-repeat="tag in tags" class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#" ng-click="view.setTag(tag)"&gt;{{tag}}&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The variable 'tags' contains the preloaded array.</p>
  
  <p>Tried on chrome and IE with the same result. </p>
  
  <p>If I remove the class 'dropdown-menu' from the ul element the complete bullet list will be displayed like:</p>
  
  <pre><code>&lt;Button&gt;
  foo *
  * bar
  * baz
  </code></pre>
  
  <p>For info:</p>
  
  <p>The app.js part populating the tags variable:</p>
  
  <pre><code>    this.loadTags = function () {
          $http.get('http://localhost:5566/api/tags').
          success(function (data, status, headers, config) {
              $scope.tags = data.tags;
          }).
          error();
      }
  </code></pre>
  
  <p>(This works fine however)</p>