Two dropdowns for Angular UI Bootstrap not working

Question

I just created a second drop-down menu by copying and pasting the official Angular UI Bootrstrap Dropdown sample, and now none of them pulled out the menu. See Plunker in

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 two 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 should be noted that the use of the is-open attribute is not required. You will notice that if you remove the is-open attribute with bindings, the dropdown menus will work.