angularjs - Run an async function from scope in html - angularjs

Question

I have a DB with a collection of games and a collection of comments about those games. each game has a unique ID and each comment has a field game_id.
in the client side, I wrote an async function in the scope that retrieves the number of comments for a game from the db and return a promise. what is the right (and most cleanest) way to show the value in the HTML ?
I know there are different ways to do this. I am looking for the simplest and cleanest way.
Will this code work?
//code in HTML
<div ng-repeat="game in games">
<span>{{game.date}}</span>
<span>{{game.home}}</span>
<span>{{game.away}}</span>
<span>{{getNumberOfComments(game.id)}} Comments</span>
</div>
app.factory('apiService', function($http) {
return {
getGames: function() {
return $http.get('/api/games',{cache: true});
},
getCommentsCount: function(game_id) {
return $http.get('/api/CommentsCount/' + id);
}
};
});
app.controller('MyCtrl', function ($scope, apiService) {
gameService.getGames().then(function(resp) {
$scope.games = resp.data;
});
$scope.getNumberOfComments = function(id){
return apiService.getCommentsCount(id).then(function(resp){
return resp.data;
});
});
});
Followup question:
if I have many games (lets say 30), is it a bad idea to send 30 HTTP requests to the server for each game? is it better to send one request called "getAllComments" and retrieve the comments count for each game from the repsonse ?
for example:
function getAllComments() {
$http.get('/allComments',function(data){
$scope.games.forEach(function(game){
game.commentsCount = data[game.id];
});
});
}
//code in HTML
<div ng-repeat="game in games">
<span>{{game.commentsCount}} Comments</span>
</div>
This seems like a good solution - but the problem starts when i have more than 30 games but i want to show 30 games to the user and give him the possibility to load more. Then im actually asking more comments than I need and i have to run this function every time the user loads more games. it seems like a complicated and efficient solution.
EDIT:
One solution is to aggregate the information on the server side and have the client send 1 HTTP request and the response will include all the information. To implement this I will need to iterate the list of games in the server side and for each game retrieve the comments count from the comment collection. The downside of this solution is that the it will take longer for the client to see the list of games. I rather the client to first see the list of games as soon as possible and then after that to load the number of comments. Another downside is the in NodeJS (the backend framework that I'm using), a code like that will block the main thread from serving other clients. Therefore I do not want to make any iterations on the server side.
One more thing that needs to take into account is caching. I want to save the HTTP request that retrieves the games in the $http cache. Because the list of games is static and not going to change, unlike the comments count, that is always increasing. This way when the client moves to a different route and comes back to the games list, the games will show up immediately. But I do want to load the comments count every time the user comes back to the games page.

Answer 1

A clean way to do this would be to first move the code that makes the http call to a service:
app.factory('gameService', function($http) {
return {
getGames: function() {
return $http.get('/api/games');
}
};
});
Then, inject the service in your controller, call the get method and set the value on scope to be used by the view:
app.controller('MyCtrl', function ($scope, gameService) {
$scope.model = {};
gameService.getGames().then(function(resp) {
$scope.model.games = resp.data;
});
});
And your html would be like this:
<div ng-repeat="game in model.games">
<span>{{game.comments.length}} Comments</span>
</div>
Note that this assumes that the endpoint returns all the games and each game has a field for the comments. For example, the schema for a Game might look like this:
{
"id": "1",
"name": "The best game",
"comments": [
{
"id": "c1",
"content": "The is the best game ever"
}
]
}