Get Json array that equals the value of $stateParam - angularjs

Question

I'm having trouble in fetching specific array in details page. $stateParams needs to be the same with the JSON array id but I can't print that on its template. I really appreciate any help. Thank you.
Services
angular.module('demo', ['ui.router']);
.factory('BookService', ['$http', function($http){
return {list: $http.get('data.json')}
}])
Routes
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/books');
$stateProvider
.state('books', {
url:'/books',
templateUrl: 'templates/books.html',
controller: 'BooksCtrl'
})
.state('books.detail', {
url: '/detail/:id',
templateUrl: 'templates/books-detail.html',
controller: 'BooksDetailCtrl'
});
}])
Controllers
.controller('BooksCtrl', ['$scope', 'BookService', function($scope, BookService){
BookService.list
.success(function(data){
$scope.books = data;
});
}])
.controller('BooksDetailCtrl', ['$scope', '$stateParams', 'BookService',
function($scope, $stateParams, BookService){
$scope.selectedBook = BookService.find(BookService.list, $stateParams.id);
}])
JSON File(data.json)
{ "demo_site": [{
"id": "1",
"title": "Demo 1",
"summary": "Summary 1",
"body": "test demo 1",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}, {
"id": "2",
"title": "Demo 2",
"summary": "Summary 2",
"body": "test demo 2",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}]
}
Templates
books.html
<ul>
<li ui-sref-action="selected" ng-repeat="book in books.demo_site">
<a ui-sref="books.detail({id: book.id})">{{ book.title }}</a>
</li>
</ul>
<div class="detail" ui-view></div>
books-detail.html
<div>
{{selectedBook.title}}
</div>

Answer 1

I've edited your code a bit and it works now. The most important change is mocking the BookService by bookServiceMock (I added it because I don't have access to your service).
app.js
var app = angular.module('demo', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/books');
$stateProvider
.state('books', {
url:'/books',
templateUrl: 'books.html',
controller: 'BooksCtrl'
})
.state('books.detail', {
url: '/detail/:id',
templateUrl: 'books-detail.html',
controller: 'BooksDetailCtrl'
});
}]);
app.service('bookServiceMock', function() {
var books =[{
"id": "1",
"title": "Demo 1",
"summary": "Summary 1",
"body": "test demo 1",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}, {
"id": "2",
"title": "Demo 2",
"summary": "Summary 2",
"body": "test demo 2",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}];
this.getBooks = function() {
return books;
};
this.getBook = function(id) {
for (var i = 0; i < books.length; i++) {
if (books[i].id === id) {
return books[i];
}
}
return null;
}
})
app.controller('BooksCtrl', ['$scope', 'bookServiceMock', function($scope, bookServiceMock){
console.log('BooksCtrl');
$scope.books = bookServiceMock.getBooks();
}]);
app.controller('BooksDetailCtrl', ['$scope', '$stateParams', 'bookServiceMock',
function($scope, $stateParams, bookServiceMock){
$scope.selectedBook = bookServiceMock.getBook($stateParams.id);
}]);
books.html
<ul>
<li ui-sref-action="selected" ng-repeat="book in books">
<a ui-sref="books.detail({id: book.id})">{{ book.title }}</a>
</li>
</ul>
<div class="detail" ui-view></div>
Here is the plunkr: http://plnkr.co/edit/VJxlqguJZGrIutAFLCNc