Can't read the result of a Firebase Promise with the ng-if Angular directive

Question

I'm trying to show the categories of a service using AngularJS and firebase with the ng-if directive by testing if the entry exist in a table.

The tables are written in a denormalize way as recommended on the Firebase guideline.

- 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 am trying to show on a page of a service the categories of the table where the key of the service exists.

    <li
      ng-repeat="cat in servicecat"
      ng-if="checkIfTrue(cat.$id, postSrv.$id)">
      {{ cat.name }}<br>
    </li>

So I'm trying to get the value a srvid ("true") and return it with the function checkIfTrue(catid,srvid).

$scope.checkIfTrue = function(catid,srvid) {
  var ref = fb.child('servicecat/'+catid+'/services/'+srvid);
  ref.once('value').then(function(snap){ 
    return snap.exists();
  });
}

I don't understand why the ng-if directive does not take the result of the function (which is true when the element exists in the table).

I can see that if I had a "return true;" at the end of the function (out of the ref.once('value') function), it is taken by the ng-if directive.

I was then trying to drop the result of the "once" function in a global variable that I could return at the end of the checkIfTrue function. It seems that the return on the "once" function is a "promise" that the ng-if directive can't read.

So I manage to fetch all categories and all services with the following factory. But when I try to get the selected categories of a specific sercices, It seems I miss something. I was trying to do it by joining two tables but It seems that I shouldn't do this method. Anyway I can't manage to solve this issue.

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

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

app.controller("maincontroller", ["$scope","$firebaseArray","$firebaseObject",
"getServices","getServiceCategories",
  function($scope,$firebaseArray,$firebaseObject,  getServices, getServiceCategories) 
  {
    // GET ALL SERVICES AND ALL CATEGORIES
    $scope.services = getServices;
    $scope.servicecat = getServiceCategories;
    
    // SHOW & EDIT SERVICE DETAILS AND CATEGORIES
    $scope.showDetailsService = function(srvid) {
       var ref = fb.child('services/'+srvid);
       $scope.selectSrvtoPost = $firebaseObject(ref);
       var ref2 = fb.child('services/'+srvid+'/servicecat/');
       $scope.selectSrvCatID = $firebaseArray(ref2);
       var result = ref2.once('value', function(snap) {
       snap.forEach(function(snap2) {
         var catid = snap2.key;
         var ref3 = fb.child('servicecat/'+catid);
         ref3.once('value', function(snap3) {
           var catname = snap3.val().name;
           console.log("Srvid: "+srvid+" /// Id : "+catid+" /// Name : "+catname);
           return snap3;
        })
      })
    })
    // ANOTHER TRY WITH $loaded()
    var ref2 = fb.child('services/'+srvid+'/servicecat/');
    $scope.listcat = $firebaseArray(ref2);
    $scope.listcat.$loaded()
    .then(function(snap) {
      snap.forEach(function(snap2) {
        var catid = snap2.key;
        var ref3 = fb.child('servicecat/'+catid);
        ref3.once('value', function(snap3) {
          var catname = snap3.val().name;
          console.log("Srvid: "+srvid+" /// Id : "+catid+" /// Name : "+catname);
          return snap3;
        })
      })
    })

}
 )];

<div ng-controller="mainController">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--3-col">
        <h3>List Services</h3>
        <ul>
          <li ng-repeat="service in services" ng-click="showDetailsService(service.$id)" class="clickable"><strong>{{ service.title }}</strong><br>{{ service.details }} <br><span class="idgrey">{{ service.$id }}</span></li>
        </ul>
        <h3>List All Categories</h3>
        <li ng-repeat="cat in servicecat">{{ cat.name }}</li>
      </div>            
      <div class="mdl-cell mdl-cell--3-col">
        <h3>Post Full Service Selected </h3>
        <p>
          <strong>{{ selectedService.title }}</strong><br>
          {{ selectedService.details }}
          <h5>Id of Selected Categories</h5>
          <ul>
            <li ng-repeat="cat in selectedCategoriesId">{{ cat.$id }}</li>
          </ul>
          <hr>
          <h5>Name of Selected Categories</h5>
          <ul>
            <li ng-repat="cat in selectedSrvCat">ID : {{ findcatscope.name }}</li>
          </ul>     
      </div>
    </div>
</div>