angularjs - it just keep loading the same page with angular ngRoute? -

i learning angular building simple bookstore web app using nodejs restful api server. built server , works fine, once comes front end face issue. built main page using angular ngroute data server , presented following:

the picture , title , description angular read no problem once press button "view details" should redirected details page using book id server.

from front end route provider:

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: '/' }) }); 

books controller:

    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;     });   }   }]); 

books html panel being designed:

<div class="panel panel-default" ng-init="getbooks()"> <div class="panel-heading">   <h3 class="panel-title">latest books</h3> </div> <div class="panel-body">   <div class="row">       <div ng-repeat="book in books">           <div class="col-md-6">               <div class="col-md-6">                   <h4>{{book.title}}</h4>                   <p>{{book.description}}</p>                   <a class="btn btn-primary"   href="#/books/details/{{book._id}}">view details</a>               </div>               <div class="col-md-6">                   <img class="thumbnail" src="{{book.image_url}}">               </div>           </div>       </div>   </div> </div> </div> 

this details book html clicking button must redirected to:

details_book.html

 <div class="panel panel-default" ng-init="getbook()">  <div class="panel-heading"> <h3 class="panel-title">{{book.title}}</h3> </div> <div class="panel-body"> <div class "row">     <div class ="col-md-4">             <img src="{{book.image_url}}">     </div>     <div class ="col-md-8">         <p>{{book.description}}</p>         <ul class="list-group">             <li class="list-group-item">genre: {{book.genre}}</li>             <li class="list-group-item">author: {{book.author}}</li>             <li class="list-group-item">publisher: {{book.publisher}} </li>           </ul>     </div> </div> </div> </div> 

and request server prove server working find using id

the error once open main page:

and error once press button:

note: once press button give me url: http://localhost:3000/#!/#%2fbooks%2fdetails%2f599701c1f3da51117535b9ab id 599701c1f3da51117535b9ab can see in end of url. should give url such as: http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab , once write url manually page details no problem once press button book.html page previews strange url again is: http://localhost:3000/#!/#%2fbooks%2fdetails%2f599701c1f3da51117535b9ab load no where.

this github url documents: https://github.com/abdallahrizk/bookstore.git

any suggestions please!!

use $rootscope instead of $scope getbook function

$rootscope.getbook = function(){   var id = $routeparams.id;     $http.get('/api/books/'+id).then(function(response){         $scope.book = response.data; });     init(getbook); }  

note: add $rootscope bookcontroller