Below is the controller I have set up to display details of a single book from my collection of json records
.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);
})
}]);
<div class="panel panel-default">
<div class="panel-heading">Online Bookstore</div>
<div class="panel-body">
<div class="col-md-12">
<div class="col-md-3">
<img src="{{book.imgUrl}}" class="img-thumbnail" width="200" height="200">
</div>
<div class="col-md-9">
<h2>{{book.title}}</h2>
<p style="text-align:justify;">{{book.description}}</p>
</div>
</div>
<hr>
</div>
</div>
What is the best way to showcase a single book's information retrieved from response.data using the provided controller?