Can't create a chaining promise with firebase

I have the two following tables with services and categories:

   - servicecat
      - catid
        - name : "Category Name"
        - services
            - srvid1 : true
            - srvid2 : true
            - srvid3 : true
   - services
     - srvid
        - name: "Service Name"
        - Details: "blabla"
        - servicecat:
            - catid1 : true
            - catid2 : true

I'm trying to build a firebaseArray to show when a user click on a service its information and categories.

<script>

var app = angular.module("sampleApp", ['firebase']);
var fb = firebase.database().ref();

app.factory("getServices", ["$firebaseArray",
  function($firebaseArray) {
    var ref = firebase.database().ref().child("services");
    return $firebaseArray(ref);
  }
]);

app.controller("mainController", ["$scope", "$firebaseArray","$firebaseObject","getServices",
  function($scope, $firebaseArray, $firebaseObject, getServices) {
    $scope.services = getServices;

    $scope.postFullService = function(srvid) {
      var ref = fb.child('services/'+srvid);
      $scope.selectSrvtoPost = $firebaseObject(ref);
      var ref2 = fb.child('services/'+srvid+'/servicecat/');
      var list = $firebaseArray(ref2).$loaded()
      .then(function(snap) {
        $scope.selectCategories = snap;
        snap.forEach(function(snap2) {
          $scope.selectCategories.catid = snap2;
          var id = $scope.selectCategories.catid.$id;
          var ref3 = fb.child('servicecat/'+id);
          var list2 = $firebaseObject(ref3).$loaded()
          .then(function(snap3) {
            $scope.selectCategories.catname = snap3;
          })
        })
      })
      .catch(function(error) {
        console.log("Error: ", error);
      })
    }
  }
]);
</script>

<body ng-app="sampleApp">
  <div ng-controller="mainController">
    <h1>Services List</h1>
    <ul>
      <li ng-repeat="service in services" ng-click="postFullService(service.$id)" class="click"><strong>{{ service.title }}</strong><br>{{ service.details }}</li>
    </ul>
    <h2>Service Selected</h2>
    <ul>
      <li><strong>{{ selectSrvtoPost.title }}</strong><br>{{ selectSrvtoPost.details }}</li>
     <h3>Selected Categories</h3>
     <hr>
     {{ selectCategories }}
     <hr>
     {{ selectCategories.catid }} <br> {{ selectCategories.catid.$id }} <br> {{ selectCategories.catname.name }} <hr>
     <br><strong>UL:</strong> 
     <ul>
      <li ng-repeat="catselect in selectCategories">
        {{ catselect.$id }} <br>
        Catid : {{ catselect.catid }}

      </li>
     </ul>
  </div>
</body>

I can't seem to find how to make it work. I achieve to show the result in the console but I can't create a firebaseArray that I could use in DOM to manipulate the two tables and its records linked. It seems that I should be using chaining promises to solve the problems but I don't really understand how it works.

It is important to realize that invoking either the $firebaseObject service or the $firebaseArray service immediately returns an empty reference (object or array). Once the data is returned from the server the existing reference is populated with the actual data. The references have a property called $loaded which is a function which returns a promise which is resolved when the initial object (or array) data has been downloaded from the database. The promise resolves to the $firebaseObject or $firebaseArray itself.

  var objectPromise = $firebaseObject(ref).$loaded();
  var arrayPromise =  $firebaseArray(ref).$loaded();

The promises are $q Service promises which are integrated with the AngularJS framework digest cycle so that changes to $scope will automatically update the DOM. For this reason, It is better use the .then method of AngularFire $q Service promises than the .then method of promises returned by the core Firebase client library.

Chain from the $q service promises to create data from multiple calls to the Firebase server.