create a dropdown button in a selectable item in a list

Question

I am using jQuery Ui to make list items selectable on my web app. Inside each item from this list I have a dropdown button. When I'm adding the selectable option to the list, the dropdown options doesn't open since the item (the button's parent) is being selected, and the button is not clickable anymore, as if the selectable option "hides" the clickability of the button. How can i fix it? My code looks like this:

<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
   <div type="button" class="dropdown " >
       <a class="dropdown-toggle " id="dLabel" role="button" data-toggle= "dropdown" data-target="#" ng-href="/page.html">aaa
       </a>
       <ul class=" dropdown-menu " role="menu" >
           <li > ng-href="#" >blabla1</a></li>
           <li > ng-href="#" >blabla2</a></li>
           <li > ng-href="#" >blabla3</a></li>

       </ul>
    </div>
</li>

Answer 1

First you code is missing a few parts. See comments below.

I took what you had and cleaned it up:

<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
    <div type="button" class="dropdown "> <a class="dropdown-toggle " id="dLabel" role="button" data-toggle="dropdown" data-target="#" ng-href="/page.html">aaa
   </a>

        <ul class=" dropdown-menu " role="menu">
            <!-- You were missing the <a in front of each ng-href -->
            <li> <a ng-href="#">blabla1</a>
            </li>
            <li> <a ng-href="#">blabla2</a>
            </li>
            <li> <a ng-href="#">blabla3</a>
            </li>
        </ul>
    </div>
</li>
<!-- You were missing a closing ul -->
</ul>

and you can view it working here on js fiddle

I added the following to resources and it worked ok for me:

http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js

http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css