title: Angularjs routing with ngroute and ngview does not work for me.Clicking on a link does not load the intended page
body: <p>There are some 3 links(Home, About, Contact) in the index.html file. On clicking them, I should be able to display new messages/html(home.html, contact.html, about.html) files as defined in script js. But that does not happen.</p>
  
  <p>There are otherwise no errors while doing an "inspect element' in chrome.</p>
  
  <p>The url on clicking on contact is :
  file:///C:/Users/Sonali%20Sinha/Desktop/demo/omg/index.html#contact</p>
  
  <p>The code files are as below.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="scotchApp"&gt;
  &lt;head&gt;    
  &lt;script src="angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mainController"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;&lt;i class="fa fa-shield"&gt;&lt;/i&gt; About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;&lt;i class="fa fa-comment"&gt;&lt;/i&gt; Contact&lt;/a&gt;   &lt;/li&gt;
       &lt;/ul&gt;
  &lt;div id="main"&gt;
   {{ message }}
  &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>script.js</p>
  
  <pre><code>scotchApp.config(function($routeProvider,$locationProvider) {
          $routeProvider
  
              // route for the home page
              .when('/', {
                  templateUrl : '/home.html',
                  controller  : 'mainController'
              })
  
              // route for the about page
              .when('/about', {
                  templateUrl : '/about.html',
                  controller  : 'aboutController'
              })
  
              // route for the contact page
              .when('/contact', {
                  templateUrl : '/contact.html',
                  controller  : 'contactController'
              });
              $locationProvider.html5Mode({
                  enabled: true,
                  requireBase: false
              });
      });
  
      // create the controller and inject Angular's $scope
      scotchApp.controller('mainController', function($scope) {
          // create a message to display in our view
          $scope.message = 'Everyone come and see how good I look!';
      });
  
      scotchApp.controller('aboutController', function($scope) {
          $scope.message = 'Look! I am an about page.';
      });
  
      scotchApp.controller('contactController', function($scope) {
          $scope.message = 'Contact us! JK. This is just a demo.';
      });
  </code></pre>
  
  <p>home.html</p>
  
  <pre><code>&lt;div&gt;
  &lt;h1&gt;Home Page&lt;/h1&gt;
  &lt;p&gt;{{ message }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>contact.html</p>
  
  <pre><code>&lt;div&gt;
  &lt;h1&gt;Contact Page&lt;/h1&gt;
  &lt;p&gt;{{ message }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>about.html</p>
  
  <pre><code>&lt;div&gt;
  &lt;h1&gt;About Page&lt;/h1&gt;
  &lt;p&gt;{{ message }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The directory structure is as below.</p>
  
  <p>demo/omg/index.html
  All files are inside omg.</p>
  
  <p>Guys, I am stuck with this for a day now.:-( 
  I am just a day old in angularjs. Please be kind and help me out.
  Thanks in advance! :-)</p>