How to use limitTo filter only when all data will be grabbed from firebase

Question

I want to show only 3 most recent reviews (every review have "id" value), but limitTo and orderBy filters doesn't work here correctly. I guess it's because when filter runs there is not data from firebase yet.

How to apply these filter only when categories.$loaded() == true? I tried with custom filters but didn't manage to do it correctly...

<div ng-repeat="category in categories">
        <div ng-repeat="vendor in category.vendors">
            <div ng-repeat="review in vendor.reviews | orderBy: -id | limitTo:3">
                <img src="img/placeholder-avatar.jpg" alt="" />
                <div class="right-content">
                    <h4>{{ vendor.name }}</h4>
                    <div class="stars"></div>
                    <span class="category"> {{ category.name }} </span>
                    <p> {{ review.body | limitTo:100 }}{{ review.body.length < 100 ? '' : '...'}} </p>
                </div>
            </div>
        </div>
    </div>

In controller I have only:

app.controller('mainCtrl', function($scope, $http, $firebaseObject) {
  var ref = new Firebase("https://scorching-torch-1679.firebaseio.com");
  $scope.categories = $firebaseObject(ref);
});

My firebase structure (here I'm trying to get to the reviews, that are assigned to vendors inside categories):

Answer 1

This will help to load this after categories.$loaded() == true:

 <div ng-if="categories.$loaded()">
     <div ng-repeat="category in categories">
       <div ng-repeat="vendor in category.vendors">
        <div ng-repeat="review in vendor.reviews | orderBy: -id | limitTo:3">
            <img src="img/placeholder-avatar.jpg" alt="" />
            <div class="right-content">
                <h4>{{ vendor.name }}</h4>
                <div class="stars"></div>
                <span class="category"> {{ category.name }} </span>
                <p> {{ review.body | limitTo:100 }}{{ review.body.length < 100 ? '' : '...'}} </p>
            </div>
        </div>
    </div>
</div>

But I don't think there is the problem. If you want to filter after categories.$loaded() == true, make it in your own filter:

app.filter('myFilter', function(){ 
       function myFilter(elms, filters) {
            if(categories.$loaded()) {
              // do filter stuff..
            } else {
              // return all 
            }
       };
});