title: Angularjs not routing href
body: <p>I'm trying to routing to my html file but nothing happen when I click on the navigation to link to the page given (page 1, page 2 and page 3,and no console error either. I'm using my local server via command prompt.  My app is specified in the html tag - html ng-myApp. I have looked at the similar question on this site but can't figure it out why not working. Thank you for your help.</p>
  
  <p>here's navbar:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt; &lt;a class="navbar-brand" href="#/"&gt;Logo&lt;/a&gt;
          &lt;/div&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#/"&gt;Page1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#/"&gt;Page2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#/"&gt;Page3&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the pages which will be displayed in ng-view withing index.html</p>
  
  <p>Page1.html</p>
  
  <pre><code>&lt;div&gt;
      &lt;h1&gt;{{titlePage1}}&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Page2.html</p>
  
  <pre><code>&lt;div&gt;
      &lt;h1&gt;{{titlePage2}}&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Page3.html</p>
  
  <pre><code>&lt;div&gt;
      &lt;h1&gt;{{titlePage3}}&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller.js</p>
  
  <pre><code>angular.module('RouteControllers', [])
  .controller('firstController', function($scope) {
      $scope.firstTitle = "First page is Blue"
  
     })
  .controller('secondController', function($scope) {
      $scope.secondTitle = "Second page is White"
  
     })
  .controller('thirdController', function($scope) {
      $scope.thirdTitle = "Third page is Orange"
  
     });
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>       angular.module("myApp", ["ngRoute", "RouteControllers"]);
  
         angular.module("myApp").config(function($routeProvider) {
               $routeProvider.when("/", {
                    template: "&lt;div main-slide-show&gt;&lt;/div&gt;"&lt;!--This is background template please ignore it --&gt;
        })
  .when("/page1", {
      templateUrl : "templates/page1.html",
      controller : "firstController"
  })
  .when("page2", {
      templateUrl : "templates/page2.html",
      controller : "secondController"
  })
          .when("page3", {
                   templateUrl : "templates/page3.html",
                   controller : "thirdController"
          });
  </code></pre>