current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 5 down vote favorite

I have copied code directly form the Angular Bootstrap UI Plunkr

I am using a blank Angular FullStack (Mean) template for building an application.

When I use the code from the Angular Bootstrap uib-dropdown it ends up formatted incorrectly and does not work, all other angular bootstrap components seem to work fine

<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
    <li role="menuitem"><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li role="menuitem"><a href="#">Separated link</a></li>
  </ul>
</div>

How it Looks in Angular FullStack

share|improve this question
up vote 8 down vote accepted

Upgrade Angular UI in bower.json:

"angular-bootstrap": "~0.14.3",

Then run:

bower install
share|improve this answer
    
This should be the answer! Thanks! – Michael Hobbs Jan 9 at 13:46
    
This breaks the navbar. To fix it you will need to edit navbat.html and change <div collapse...> to <div uib-collapse...> – Michael Hobbs Jan 9 at 14:17
up vote 5 down vote

I have solved my problem by not using the Angular Bootstrap Dropdown directive and gone with Bootstrap + Plain Old Angular code which I googled.

This is working fine for me.

    <div class="input-group">
        <div class="btn-group" ng-class='{open: open}'>
            <button class="btn btn-primary dropdown-toggle"
                    data-toggle="dropdown"
                    ng-click='open=!open'>
                Action<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li ng-repeat="choice in ['the', 'quick', 'brown', 'fox']"
                    ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
                    <a href="#">{{choice}}</a>
                </li>
            </ul>
        </div>
    </div>
share|improve this answer
    
This solution doesn't close the dropdown when you click elsewhere in the browser – goonerify Apr 22 at 14:24
up vote 1 down vote

I had this problem. I updated Angular UI Bootstrap to 0.14.3 version & then resolved the problem.

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.