current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 9 down vote favorite

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.

share|improve this question

3 Answers 3

up vote 11 down vote accepted

You need to include ui.bootstrap module in your app.

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

and also remove ui-sref from the dropdown trigger.

<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>

Plnkr

share|improve this answer
5  
wasted 30min because of ui.bootstrap module. +1 –  Artiom Dec 5 '14 at 21:55
1  
@PSL seems like a great opportunity to add some docs to help others avoid the same pitfall. –  Brian Topping Dec 12 '14 at 22:53
up vote 2 down vote

You need to add on-toggle to your anchor tag, to avoid conflicts between bootstrap dropdown angular dropdown class, this issue is a closed on angular-ui(https://github.com/angular-ui/bootstrap/issues/2156)

share|improve this answer
    
This was a lifesaver, particularly if you are using older Angular sample code. Thanks. –  Stickley Apr 9 at 2:21
up vote 0 down vote

First make sure you included ui.bootstrap module in your app

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

Then if the problem still persists don't use dropdown-toggle and dropdown as directives. Instead use as class. i.e. class = 'dropdown-toggle' etc.

For Example :

<div class="dropdown dropdown-append-to-body">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">Dropdown on Body <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
    </ul>
</div>

Refer this issue. https://github.com/angular-ui/bootstrap/issues/2156

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.