Array not showing up in View after being generated from function in AngularJS

So I have this simple function that groups products into their respective categories. You can also see I'm calling the function within a timeout.

Problem is, even though the console.log() works like it should, I can't see anything in my view.

function sortByCategories(){
        var temp = [];
        angular.forEach(admin.categories, function(category, value){
            angular.forEach(admin.products, function(product, value){
                angular.forEach(product.categories, function(prodCat, value){
                    if(prodCat.text == category.text)
                    {
                        if(!temp[category.text])
                        {
                            temp[category.text] = [];
                        }

                        temp[category.text].push(product);
                    }
                })
            })
        })
        admin.sortedProducts = temp;
    }

    $timeout(function(){
        sortByCategories();
        console.log(admin.sortedProducts); // This shows me what I expect.
    }, 3500);

My html in my view is simply just <pre>{{admin.sortedProducts | json}}</pre>

All I see in my view is []

What am I missing?

UPDATE

I moved this function into a service and placed it as a resolve in my route. I am still facing the same issue. Here is what I have.

.factory('Products', function($rootScope, $timeout, $q, fbUrl, $firebaseArray){
    return {
        sortByCategories: function() {
            var temp = [];
            var deferred = $q.defer();
            var ref = new Firebase(fbUrl);
            ref.once('value', function(snapshot){
                var categories = snapshot.child('categories').val();
                var products = snapshot.child('products').val();

                angular.forEach(categories, function(category, value) {
                    angular.forEach(products, function(product, value){
                        angular.forEach(product.categories, function(prodCat, value){
                            if(prodCat.text == category.url)
                            {
                                if(!temp[category.url])
                                {
                                    temp[category.url] = [];
                                }

                                temp[category.url].push(product);
                            }
                        })
                    });
                });
                deferred.resolve(temp);
            })
            return deferred.promise;
        }
    }
})

And then in my route I have this in a resolve:

...
resolve: {
   categorySortedProducts : function(Products){
       return Products.sortByCategories();
   }
}
...

Then that's loaded in my controller

.controller('productsCtrl', function($scope, categorySortedProducts){

    var admin = this;

    $scope.sortedProducts = categorySortedProducts;

    console.log($scope.sortedProducts);


    ...

})

(^^ The console.log works by the way!)

Then finally in my html view I simply have this:

<pre>{{sortedProducts | json}}</pre>

I do have the controller loaded in my route and it is loaded as admin. (productsCtrl as admin).

UPDATE 2

So it looks like the console.log() is kind of weird. This is what it looks like:

Array[0]
   category-one[12]
   categroy-two[15]

Is that normal, for the parent to show Array[0]? Just trying to find issues.