two dropdowns for Angular UI Bootstrap do not work

Question

I simply created a second dropdown by copying and pasting the official Angular UI Bootrstrap Dropdown sample and now neither one pulls down the menu. See plunker at

http://plnkr.co/edit/Xpp4sBSOoCK2lNZN3ZrL?p=preview

<!-- Single button 1-->
<div class="btn-group" dropdown is-open="status.isopen">
  <button id="btn1" type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<!-- Single button 2-->
<div class="btn-group" dropdown is-open="status.isopen">
  <button id="btn2" type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown1 <span class="caret"></span>
  </button>
  <ul id="list2" class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Answer 1

You need 2 separate variables for the is-open attribute, working plunk here

Code changed:

$scope.status = {
  isopen1: false,
  isopen2: false
 };


<div class="btn-group" dropdown is-open="status.isopen1">

<div class="btn-group" dropdown is-open="status.isopen2">

It's worth mentioning using the is-open attribute is not necessary. You will notice if you remove the is-open attribute with the bindings the dropdowns will work.