title: Angular routeProvider is not working in a Single page app
body: <p>I have a small app where I am using the angularjs for routing the calls and dynamically loading the contents of the page...</p>
  
  <p>Here is the angular code I have</p>
  
  <pre><code>var amApp = angular.module('amApp', ['ngRoute']);
  
  amApp.config(
      function($routeProvider) {
          $routeProvider
              .when('/login', {
                  templateUrl: 'pages/amlogin.html',
                  controller: 'AmController'
              })
              .when('/search/', {
                  templateUrl: 'pages/search.html',
                  controller: 'SearchController'
              })
              .when('/detail/', {
                  templateUrl: 'pages/detail.html',
                  controller: 'DetailController'
              })
              .otherwise({
                  redirectTo: '/'
              });
      });
  
  amApp.controller('AmController', ['$scope', '$log', function($scope, $log){
      // Do Something via ajax
  }]);
  </code></pre>
  
  <p>And my html is as follows</p>
  
  <pre><code>&lt;li class="active"&gt;
      &lt;a href="#/login"&gt;
          &lt;i class="fa fa-dashboard"&gt;&lt;/i&gt; &lt;span&gt;Login&lt;/span&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>And I have a section in my html where i want to load the contents dynamically</p>
  
  <pre><code>&lt;section class="content"&gt;
      &lt;div data-ng-view=""&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Following are the scripts loaded in the html</p>
  
  <pre><code>&lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-table/dist/bootstrap-table.min.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/am-app.js" type="text/javascript" &gt;&lt;/script&gt;
  </code></pre>
  
  <p>When I click on the login tab the dynamic content is not loading.
  I am not able to find the problem here..
  All the scripts are loaded properly and no errors also when I inspect through firebug..</p>
  
  <p>I am new to angular... Any body could help me Please...
  Thanks in advance...</p>