<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1" data-semver="1.5.0-rc.0" src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
    <script data-require="ui-bootstrap@1.1.1" data-semver="1.1.1" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.1.1.js"></script>
    <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 data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.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 role="tablist" class="nav nav-pills">
        <li ng-class="{active:tab('home')}">
          <a href="#/">home</a>
        </li>
        <li ng-class="{active:tab('someroute')}">
          <a href="#/someroute">some route</a>
        </li>
      </ul>
-->
      <ul class="nav nav-pills" role="tablist">
        <li ng-class="{active:tab('home')}">
          <a href="#/">Home</a>
        </li>
        <li uib-dropdown>
          <a ng-class="{active:tab('someroute')}" uib-dropdown-toggle data-toggle="dropdown" href="#">Drop down
            <span class="caret"></span>
          </a>
          <ul uib-dropdown-menu>
            <li ng-class="{active:tab('someroute')}">
              <a href="#/someroute">some route</a>
            </li>
            <li ng-class="{active:tab('home')}">
              <a href="#/">home</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>
angular.module('hello', [ 'ngRoute', 'ui.bootstrap', 'home', 'someroute', 'navigation' ])
		.config(
				
				function($routeProvider, $httpProvider) {

					$routeProvider.when('/', {
						templateUrl : 'home.html',
						controller : 'home'
					})
					.when('/someroute', {
						templateUrl : 'someroute.html',
						controller : 'someroute'
					}).otherwise('/');

					$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

				}
		)

/* Styles go here */

angular.module('home', []).controller('home', function($scope, $http) {

});
<h1>Welcome</h1>
<div>
	<p>This is the main page!</p>
</div>
angular.module('someroute', []).controller('someroute', function($scope, $http) {

});
<h1>Some Route</h1>
<div>
	<p>You clicked on some route!</p>
</div>
angular.module('navigation', ['ngRoute']).controller('navigation', function($scope, $route, $http, $routeParams, $location) {

	$scope.tab = function(route) {
		return $route.current && route === $route.current.controller;
	};

});
angular.module('route3', []).controller('route3', function($scope, $http) {

});
angular.module('route4', []).controller('route4', function($scope, $http) {

});
<h1>Route Three</h1>
<div>
	<p>You clicked on route 3!</p>
</div>
<h1>Route Four</h1>
<div>
	<p>You clicked on route 4!</p>
</div>