title: Dropdown menu across multiple buttons
body: <p>I have a list of buttons built in an ng-repeat loop. I want a drop down menu to be shared with them all.</p>
  
  <p>The menu would have to understand the context / underlying object within the button, so that any action applied from the menu only affects that record.</p>
  
  <p>I've been trying to follow through some bootstrap examples here:</p>
  
  <p><a href="http://angular-ui.github.io/bootstrap/" rel="nofollow">http://angular-ui.github.io/bootstrap/</a></p>
  
  <p>However once I have more than one menu, neither of the menus load, seen in this Plunker:</p>
  
  <p><a href="http://plnkr.co/edit/SIfEw0lxwen8YDAVKDfA?p=preview" rel="nofollow">http://plnkr.co/edit/SIfEw0lxwen8YDAVKDfA?p=preview</a></p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="DropdownCtrl"&gt;
  
  
      &lt;!-- Single button --&gt;
      &lt;div class="btn-group" dropdown is-open="status.isopen"&gt;
        &lt;button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"&gt;
          Button dropdown &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- Second button --&gt;
      &lt;div id="hello" class="btn-group" dropdown is-open="status.isopen"&gt;
        &lt;button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"&gt;
          Button dropdown &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also can't get my head around how to make the menu a re-usable object given that it has to dynamically apply actions to whichever button is clicked.</p>