Currently, I am learning bootstrap by experimenting with examples. I am trying to create a drop down menu that includes three links: the main tab should link to someroute, while the other two links revealed by the drop down should lead users to route3 and route4. Unfortunately, there is currently a dead link instead of three functioning links. To ensure that all four links in the menu bar work correctly, including the three in the drop down, what specific changes need to be made to the code below?
You can check out the problem recreated in this Plunker.
Below is the index.html file containing the bootstrap code for the drop down menu:
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet"/>
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; }
</style>
</head>
<body class="ng-cloak" ng-cloak="" ng-app="hello">
<div class="container" ng-controller="navigation">
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}"><a href="/">Home</a></li>
<li class="dropdown">
<a ng-class="{active:tab('someroute')}" class="dropdown-toggle" data-toggle="dropdown" href="/someroute">Some route
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-class="{active:tab('route3')}"><a href="/route3">route three</a></li>
<li ng-class="{active:tab('route4')}"><a href="/route4">route four</a></li>
</ul>
</li>
</ul>
</div>
<div class="container" ng-view=""></div>
<script type="text/javascript" src="home.js"></script>
<script type="text/javascript" src="someroute.js"></script>
<script type="text/javascript" src="navigation.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>