Bootstrap dropdown button won't open any links - css

Question

I just can't figure out why my dropdown button is not working. I can't see any errors in the console, I have tried with calling css files in the head element and at the end of the body, that hasn't changed anything. This is my navigation menu with a dropdown button in it:
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
</div>
<!-- Theme option content -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="changeTheme(1)">Flatly</a></li>
<li><a ng-click="changeTheme(2)">United</a></li>
<li><a ng-click="changeTheme(3)">Cerulean</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Theme option content -->
</div>
<!-- Container -->
</nav>
And I have included all the files needed at the bottom:
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="css/bootstrap.{{theme}}.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="css/spinner.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<!-- scripts -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- load angular libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<!-- APP scripts -->
<script src="app/hotels/hotels.js"></script>

Answer 1

Because you are missing the bootstrap.js
take a look with your nav
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
</div>
<!-- Theme option content -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="changeTheme(1)">Flatly</a>
</li>
<li><a ng-click="changeTheme(2)">United</a>
</li>
<li><a ng-click="changeTheme(3)">Cerulean</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Theme option content -->
</div>
<!-- Container -->
</nav>