Using publish-composite with Angular-Meteor - angularjs

Question

I have two Collections Articles and Categories let's say their documents are like this
Article
{
"_id": "blabla",
"title" : "title",
"description" : "description",
"categoryId" : "catId"
}
Category
{
"_id": "catId",
"title" : "category",
"description" : "description"
}
I want to make a subscription to make them like this
{
"_id": "blabla",
"title" : "title",
"description" : "description",
"category" : {
"title" : "category",
"description" : "description"
}
}
I tried using publish-composite and here it's my code.
Server
Meteor.publishComposite('articles', {
find: function() {
return Articles.find({}, { sort: {}, limit: 10 });
},
children: [
{
find: function(article) {
return Categories.findOne({ _id: article.categoryId });
}
}
]
});
And the client angularjs Controller is
angular.module("dee").controller("ArticlesListCtrl", ['$scope', '$meteor', function($scope, $meteor){
$scope.articles = $meteor.collection(Articles).subscribe('articles');
}]);
and the view is
{{ articles | json }}
the problem is it prints the article collection only without the relation.

Answer 1

adding to what #Deadly posted:
Publish composite makes it convenient to fetch related documents in a single subscription. How those documents are handled is still the same as if you made 2 separate subscriptions.
In your case, you would have two collections client side. One collection for Articles and one collection for Categories. Which Articles and which Categories that are in your local collection is based on that subscription you made.
// get a subscription to 'articles'. Use $scope.$meteorCollection so
// the subscription is destroyed when the $scope is destroyed. If you don't you will end up carrying these collections on to anther page.
$scope.$meteorSubscribe('articles').then(function() {
// This swill get you the articles from the local collection
$scope.articles = $scope.$meteorCollection(Articles);
// then you need to get the related Categories for the articles
$scope.getCategories = function(article) {
return $scope.$meteorObject(Categoris, article._id);
}
});

Answer 2

Controller:
angular.module("dee").controller("ArticlesListCtrl", ['$scope', '$meteor', function($scope, $meteor){
$scope.articles = $scope.$meteorCollection(Articles).subscribe('articles');
$scope.getCategory = function(article) {
return $scope.$meteorObject(Categories, article._id);
};
}]);
HTML:
<div ng-repeat="article in articles" ng-init="category=getCategory(article)"></div>
I also know better way to do it, but it doesn't work with angular and looks like nobody cares about it https://github.com/Urigo/angular-meteor/issues/720