title: AngularJS button directive not working
body: <p>I'm currently trying to build a RESTful API using Angular and NodeJS. Currently I'm facing a bit of a annoying problem. After creating a button to take the user to the details page of my application, the button simply doesn't respond. The button itself is coded right I think, it's the directives I'm quite unsure about.</p>
  
  <p>main app.js</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.html'
          })
          .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.html (view)</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>books.js</p>
  
  <pre><code>var myApp = angular.module('myApp');
  myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams',function($scope, $http, $location, $routeParams){
      console.log('LOADED');
      $scope.getBooks = function(){
          $http.get('/api/books ').success(function(response){
              $scope.books = response;
          });
      }
      $scope.getBook = function(){
          var id = $routeParams.id;
          $http.get('/api/books/'+id).success(function(response){
              $scope.book = response;
          });
      }
  }]);
  </code></pre>
  
  <p>I think the problem might be here : <code>$http.get('/api/books/'+id).success(function(response)</code>because that's what I'm using to route from the button to the details page.</p>
  
  <p>Here is my book_details.html page</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;li class ="list-group-item"&gt;Pages: {{book.pages}}&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Plus I am getting 404 on <code>{{book.image_url}}</code>, I have no idea why. Could this contribute to the button not being clickable ?</p>