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

so have simple function groups products respective categories. can see i'm calling function within timeout.

problem is, though console.log() works should, can't see in 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); // shows me expect.     }, 3500); 

my html in view <pre>{{admin.sortedproducts | json}}</pre>

all see in view []

what missing?

update

i moved function service , placed resolve in route. still facing same issue. here 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 in route have in resolve:

... resolve: {    categorysortedproducts : function(products){        return products.sortbycategories();    } } ... 

then that's loaded in controller

.controller('productsctrl', function($scope, categorysortedproducts){      var admin = this;      $scope.sortedproducts = categorysortedproducts;      console.log($scope.sortedproducts);       ...  }) 

(^^ console.log works way!)

then in html view have this:

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

i have controller loaded in route , loaded admin. (productsctrl admin).

update 2

so looks console.log() kind of weird. looks like:

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

is normal, parent show array[0]? trying find issues.

i changed in promise following.

var temp = []; 

to

var temp = {}; 

and shows in view. i'm guessing it's because data isn't setup sequentially [] typically used for.