How to join firebase data with the newest angularfire and fire util? - firebase

Question

I have a list of categories and a list of products:
{
categories: {
'myCategoryId': {
name: 'my category name',
products: {
'first': true,
'second': true
}
}
},
products: {
'first': {
name: 'my product name',
categoryId: 'myCategoryId'
},
'second': {
name: 'my second product name',
categoryId: 'myCategoryId'
}
}
}
In my sidebar I want to show a joined list of categories with product names so I need some joined structure like:
{
categoriesWithNames: {
'myCategoryId': {
name: 'my category name',
products: {
'first': {
name: 'my product name'
},
'second': {
name: 'my second product name'
},
}
}
}
I know I can do this with Firebase util and AngularFire, but I've tried few different methods and I cannot grasp the concept of joining denormalized data in Firebase. Can anyone help me?
Code
var myApp = angular.module("myApp", ["firebase"]);
var FBURL = "MYFBURL";
var FBEVENTS = {
'deleted':'child_removed',
'added':'child_added'
};
myApp.controller('MyController', ['$scope', '$firebase',
function ($scope, $firebase){
var base = fb(FBURL);
function fb(url) {
return new Firebase(url);
}
function fbChild(attrs) {
return $firebase(typeof attrs === "string" ? base.child(attrs) : base.child(attrs.join("/")));
}
function $a(fbChild) {
return fbChild.$asArray();
}
function $o(fbChild) {
return fbChild.$asObject();
}
var products = fbChild('products');
var categories = fbChild('categories');
$scope.products = $a(products);
$scope.categories = $a(categories);
$scope.products.$loaded().then(function(){
$scope.categories.$watch(function (snapshot) {
console.log('snapshot is', snapshot);
if(snapshot.event!==FBEVENTS.deleted) {
var foundCat = $scope.categories.$getRecord(snapshot.key);
foundCat.products = _.map(foundCat.products, function (val, key){
if (val !== true)
return val;
return $scope.products.$getRecord(key);
});
}
});
});
}