AngularJS w/ bootstrap dropdown does not work

Question

I'm creating a social network site using AngularJS with bootstrap, the site is almost done but dropdown does NOT work.

I have tried many solutions online but none of them seem to work.

"ui.router" and "ui.bootstrap" are in my app.js so that is not the problem

HTML:

<div role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/voting" class="navbar-brand">{{ settings.sitename }}</a>
        </div>
        <div class="navbar-collapse collapse">

            <form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
                <div class="form-group">
                    {{ 'already_registered' | translate }}
                </div>
                <a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
            </form>
            <form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
                <div class="form-group">
                    {{ 'no_account_signup' | translate }}
                </div>
                <a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
            </form>
        </div><!--/.nav-collapse -->
    </div>
</div>

I'm using angular 1.4.0

Answer 1

You forgot about dropdown directive. Angular bootstrap documentation says: Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.

 <div class="btn-group" dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="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>

So related to your code.

<div role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/voting" class="navbar-brand">{{ settings.sitename }}</a>
        </div>
        <div class="navbar-collapse collapse">
            <div class="btn-group" dropdown is-open="status.isopen">
                <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
            Button dropdown 
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
                    <li role="menuitem">
                        <a href="#">
                            <form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
                                <div class="form-group">

                        {{ 'already_registered' | translate }}
                    </div>
                                <a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
                            </form>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
                                <div class="form-group">
                        {{ 'no_account_signup' | translate }}
                    </div>
                                <a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
                            </form>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>