Joining data between paths based on id using AngularFire

The question:

I am currently working on an app using firebase and angularJS (ionic). Basically this is a car management app, so you have people sharing their cars with others. I tried to structure the data as flat as possible to be efficient. My issue here is that if without problem I can display the list of the car_id of the different cars shared with the logged user, I can’t find a way to display the list of cars shared with the user displaying the year and the model.

Thank you in advance for your help !

"rules": {
    "users": {
        ".write": true,
        "$uid": {
            ".read": "auth != null && auth.uid == $uid"
        "cars": {
          "role":true // Owner, borower...
    "cars": {


carapp.controller("carsController", function($scope, $firebaseObject, $ionicPopup, $ionicHistory) {


$scope.list = function() {
  frbAuth = frb.getAuth();
  if(frbAuth) {
    var userObject = $firebaseObject(frb.child("users/" + frbAuth.uid));
    userObject.$bindTo($scope, "user");
    $ = frb.child("cars");

$scope.createCar = function() {
    model: 'Create a new car',
    inputType: 'text'
  .then(function(result) {
    if(result !== "") {
      var newCar = ${
        model: result
      var newCarId = newCar.key();
      ${car_id: newCarId, role: "owner" });

    } else {
        console.log("Action not completed");



    <div class="list">
     <a ng-repeat="car in" >
         <h2>{{car.car_id}}</h2> ----> works fine !
<h2>{{car.model}}</h2> ----> How to get this working ?
         <h2>{{car.year}}</h2> ----> How to get this working ?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

In the users/ path, begin by storing the list of cars by index, instead of in an array. So your structure would be:

   "users": {
      "kato": {
         "cars": {
            "DeLorean": true

   "cars": {
      "DeLorean": {
          model: "DeLorean",
          year: "1975"

To join this using AngularFire, you have several approaches available. An AngularFire-only solution might look like this, taking advantage of $extend:

app.factory('CarsByUser', function($firebaseArray) {
   return $firebaseArray.$extend({
     $$added: function(snap) {
        return new Car(snap);

     $$updated: function(snap) {
        // nothing to do here; the value of the index is not used

     $$removed: function(snap) {

     // these could be implemented in a manner consistent with the
     // use case and above code, for simplicity, they are disabled here
     $add: readOnly,
     $save: readOnly

  var carsRef = new Firebase(...).child('cars');
  function Car(snap) {
     // create a reference to the data for a specific car
     this.$id = snap.key();
     this.ref = carsRef.child(this.$id);
     // listen for changes to the data
     this.ref.on('value', this.updated, this);

  Car.prototype.updated = function(snap) {
     this.model = data.model;
     this.year = data.year;

  Car.prototype.destroy = function() {'value', this.meta, this);

  function readOnly() { throw new Error('This is a read only list'); }

app.controller('...', function($scope, CarsByUser, authData) {
   // authenticate first, preferably with resolve
   var ref = new Firebase(...).child(authData.uid);
   $ = CarsByUser($scope);

For a more sophisticated and elegant approach, one could utilize NormalizedCollection and pass that ref into the AngularFire array:

app.controller('...', function($scope, $firebaseArray) {
  var ref = new Firebase(...);
  var nc = new Firebase.util.NormalizedCollection(
     ref.child('users/' + authData.uid),
  .select('cars.model', 'cars.year')

  $ = $firebaseArray(nc);

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment