title: it just keep loading the same page with angular ngRoute?
body: <p>I am learning angular by building a simple bookstore web app using nodejs as a restful api server. I built the server and it works fine, but once it comes to the front end I face an issue. I built the main page using angular ngRoute to get the data from the server and presented as following:</p>
  
  <p><a href="https://i.stack.imgur.com/5uGMp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5uGMp.jpg" alt="MainPage"></a></p>
  
  <p>the picture and the title and the description angular read it with no problem but once I press the button "View Details" I should be redirected to a details page using the book id from the server. </p>
  
  <p>From the front End the route provider:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngRoute']);
  
  myApp.config(function($routeProvider){
  $routeProvider.when('/',{
      controller: 'BooksController',
      templateUrl: 'views/books.html'
  })
  .when('/books',{
      controller: 'BooksController',
      templateUrl: 'views/books.hrml'
  })
  .when('/books/details/:id',{
      controller: 'BooksController',
      templateUrl: 'views/book_details.html'
  })
  .when('/books/add', {
      controller: 'BooksController',
      templateUrl: 'views/add_book.html'
  })
  .when('/books/edit/:id', {
      controller: 'BooksController',
      templateUrl: 'views/edit_book.html'
  })
  .otherwise({
      redirectTo: '/'
  })
  });
  </code></pre>
  
  <p>Books Controller: </p>
  
  <pre><code>    var myApp = angular.module('myApp');
  
  myApp.controller('BooksController', ['$scope', '$http', '$location', 
  '$routeParams', function($scope, $http, $location, $routeParams){
    console.log('BooksController loaded...');
  
  
  
    $scope.getBooks = function(){
      $http.get('/api/books').then(function(response){
        $scope.books = response.data;
      });
    }
  
    $scope.getBook = function(){
      var id = $routeParams.id;
      $http.get('/api/books/'+id).then(function(response){
        $scope.book = response.data;
      });
    }
  
  
  }]);
  </code></pre>
  
  <p>books html where the panel being designed:</p>
  
  <pre><code>&lt;div class="panel panel-default" ng-init="getBooks()"&gt;
  &lt;div class="panel-heading"&gt;
    &lt;h3 class="panel-title"&gt;Latest Books&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="panel-body"&gt;
    &lt;div class="row"&gt;
        &lt;div ng-repeat="book in books"&gt;
            &lt;div class="col-md-6"&gt;
                &lt;div class="col-md-6"&gt;
                    &lt;h4&gt;{{book.title}}&lt;/h4&gt;
                    &lt;p&gt;{{book.description}}&lt;/p&gt;
                    &lt;a class="btn btn-primary" 
   href="#/books/details/{{book._id}}"&gt;View Details&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-md-6"&gt;
                    &lt;img class="thumbnail" src="{{book.image_url}}"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This the details book html where by clicking the button it must be redirected to:</p>
  
  <p>details_book.html</p>
  
  <pre><code> &lt;div class="panel panel-default" ng-init="getBook()"&gt;
   &lt;div class="panel-heading"&gt;
  &lt;h3 class="panel-title"&gt;{{book.title}}&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="panel-body"&gt;
  &lt;div class "row"&gt;
      &lt;div class ="col-md-4"&gt;
              &lt;img src="{{book.image_url}}"&gt;
      &lt;/div&gt;
      &lt;div class ="col-md-8"&gt;
          &lt;p&gt;{{book.description}}&lt;/p&gt;
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item"&gt;Genre: {{book.genre}}&lt;/li&gt;
              &lt;li class="list-group-item"&gt;Author: {{book.author}}&lt;/li&gt;
              &lt;li class="list-group-item"&gt;Publisher: {{book.publisher}}
  &lt;/li&gt;
  
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the get request from the server to prove the server working find using a certain id</p>
  
  <p><a href="https://i.stack.imgur.com/KFTyC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KFTyC.png" alt="PostMan Get Request"></a></p>
  
  <p>The error I get once I open the main page:
  <a href="https://i.stack.imgur.com/bV8v1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bV8v1.png" alt="First Error"></a></p>
  
  <p>And this error I get once I press the button:
  <a href="https://i.stack.imgur.com/DBx3n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DBx3n.png" alt="Second Error"></a></p>
  
  <p>Note: Once I press the button it give me this url:
  <a href="http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab" rel="nofollow noreferrer">http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab</a>
  where the id is 599701c1f3da51117535b9ab which we can see it in the end of the url. But it should give url exactly such as: 
  <a href="http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab" rel="nofollow noreferrer">http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab</a> 
  and once I write this url manually I get to the page which is the details with no problem but once I press the button from the book.html page I get the previews strange url again which is:
  <a href="http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab" rel="nofollow noreferrer">http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab</a>
  Which load no where.</p>
  
  <p>This is the github url for all the documents: 
  <a href="https://github.com/AbdallahRizk/BookStore.git" rel="nofollow noreferrer">https://github.com/AbdallahRizk/BookStore.git</a></p>
  
  <p>Any suggestions Please!!</p>