Retrieving data from dynamic URL - angular - angularjs

Question

I'm trying to retrieve data with the following code, where the URL of the service has a dynamic parameter ie. the id, there is something wrong because the data isn't displaying, when I load the URL in the browser with this on the end:
../categories/165
could I get some help please? Thanks.
...
.when('/categories/:categoryId', {
controller: 'BookCategoryController',
templateUrl: 'views/booksincategory.html'
})
...
controller
app.controller('BookCategoryController', ['$scope', 'bookcategories', '$routeParams', function($scope, bookcategories, $routeParams) {
bookcategories($scope.id).success(function(data) {
console.log($scope.id);
$scope.detail = data.books[$routeParams.categoryId];
});
}]);
service
app.service('bookcategories', ['$http', function($http) {
return {
get: function(id) {
return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}
}
}]);
booksincategory.html
<div class="category col" ng-repeat="book in detail">
<h3 class="title">{{book.title}}</h3>
</div>

Answer 1

Change your service code to :
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')
}
}
}]);
and in Controller :
bookcategories.getAllBooks($scope.id).then(function(response) {
$scope.detail = response.data.books[$routeParams.categoryId];
});
EDIT2
You have to define $scope.id somewhere in your controller like below :
$scope.id= 1 ;
console.log($routeParams.categoryId);//check what you are getting here
bookcategories.getAllBooks($routeParams.categoryId).then(function(response) {
$scope.detail = response.data.books[$routeParams.categoryId];
});
after this your service URL will go like below (Took this URL from your Question)
http://52.41.65.211:8028/api/v1/categories/1/books.json
See 1 in the URL its $scope.id !

Answer 2

.success & .error function(deprecated since angular 1.4.X) are not chainable-friendly, so it prevents to return a promise object from get method. Removing success & error callback will allow to return promise object from function. Consider using .then function over promise since .success & .error callback deprecated.
get: function(id) {
return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json');
}
//controller code & pass `$routeParams.categoryId` in it
bookcategories($routeParams.categoryId).then(function(response) {
$scope.detail = response.data.books[$routeParams.categoryId];
});