title: How to display a single object from response.data?
body: <p>Foloowing is my controller for displaying single book details from collection of json records   </p>
  
  <pre><code>.controller('BookDetailsController', ['$scope','$http','$stateParams',function($scope,$http,$stateParams){
          $http({
              url: "/api/books/",
              method: "get",
              params: {id: $stateParams.id}
          }).then(function(response){
              $scope.books = response.data;
              console.log($scope.books);
  
          })
  }]);
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Online Bookstore&lt;/div&gt;
      &lt;div class="panel-body"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="col-md-3"&gt;
          &lt;img src="{{book.imgUrl}}" class="img-thumbnail" width="200" height="200"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-9"&gt;
              &lt;h2&gt;{{book.title}}&lt;/h2&gt;
              &lt;p style="text-align:justify;"&gt;{{book.description}}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>How to display single book record from response.data; using above controller </p>