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']);