Data not displaying from service with dynamic parameter - angularjs

Question

not sure what I have wrong here but the data doesn't display with this code and the only error I get is an XML Reading error XML in booksincategory.html , any ideas? Thanks
**booksincategory.html **
<div class="category col" ng-repeat="book in detail">
<h3 class="title">{{book.title}}</h3>
</div>
controller
app.controller('BookCategoryController', ['$scope', 'bookcategories', '$routeParams', function($scope, bookcategories, $routeParams) {
bookcategories.getAllBooks($scope.id).then(function(response) {
$scope.detail = response.data.books[$routeParams.categoryId];
});
}]);
service
app.service('bookcategories', ['$http', function($http) {
return {
getAllBooks: function(id) {
return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
}
}
}]);
app.js
var app = angular.module('ReaderApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/categories/:categoryId', {
controller: 'BookCategoryController',
templateUrl: 'views/booksincategory.html'
})
.otherwise({
redirectTo: '/books'
});
});
index.html
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookCategoryController.js"></script>
<!-- Services -->
<script src="js/services/bookcategories.js"></script>