AngularJS bootstrap dropdown navigation bar

Question

I'm learning bootstrap and have a problem.

I made a dropdown on navigation bar. However, when I clicked on it, the dropdown wasn't collapsed. The class="dropdown" doesn't change to class="dropdown open" and the directive "aria-expanded" doesn't change from "false" to "true" . Only when I go to another page and then come back, the dropdown menu will work properly. I'm wondering why this is hapenning.

And I'm using two bootstrap libraries because I need boostrap 4 to use card deck container

index.html (with all updated files)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/angular-ui-router@1.0.3/release/angular-ui-router.min.js"></script>
<script src="node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>   
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="style.css" />

board.html

<div ui-view>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Home</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#">Today</a></li>
                    <li><a href="#">Tomorrow</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dates</a>
                        <ul class="dropdown-menu">
                            <li><a href="#/home">August 1st</a></li>
                            <li><a href="#/home">August 2nd</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <cards></cards>
</div>

Answer 1

Your example seems to function correctly locally for me and in the included snippet. Maybe ensure that there aren't any caching issues in your test environment.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div ui-view> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Home</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Today</a></li> <li><a href="#">Tomorrow</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dates</a> <ul class="dropdown-menu"> <li><a href="#/home">August 1st</a></li> <li><a href="#/home">August 2nd</a></li> </ul> </li> </ul> </div> </nav> </div> <cards></cards> </div>