Angularjs bootstrap dropdown not working

Question

Am bit new to angularjs and bootstrap.

Am trying to add a simple dropdown. But it is not working.

Tried out the suggestion @ Bootstrap 3 simple dropdown not working. That is also not working.

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a> <ul class="dropdown-menu">   <li><a ui-sref="a">a</a></li>   <li><a ui-sref="b">b</a></li>   <li><a ui-sref="c">c</a></li>   <li><a ui-sref="d">d</a></li>   <li><a ui-sref="e">e</a></li>   <li><a ui-sref="f">f</a></li>   <li><a ui-sref="g">g</a></li>   <li><a ui-sref="h">h</a></li>   <li><a ui-sref="i">i</a></li>            <li><a ui-sref="j">j</a></li>   <li><a ui-sref="k">k</a></li> </ul> </li> 

Complete code @ http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview

Hope someone would help me out.

Answer 1

NOTE: Most answers here are outdated! The main issue is that the dropdown directive is not available as a class anymore, but only as an attribute, and that it has been renamed to uib-dropdown.

I was stuck here for a while, but changing the class into an attribute worked as a charm.

Also, you need to use the 'uib-' prefix for each directive instead of plain names.

<li uib-dropdown>     <a uib-dropdown-toggle>a<span class="caret"></span></a>     <ul uib-dropdown-menu>         <li><a ui-sref="a">a</a></li>         <li><a ui-sref="b">b</a></li>         <li><a ui-sref="c">c</a></li>         <li><a ui-sref="d">d</a></li>     </ul> </li> 

(And of course, make sure you did not forget to include the ui.bootstrap module in your app.)

var app = angular.module('App', ['ui.router','ui.bootstrap']);