Firebase and Angularjs Scope array of objects undefined

Question

I am trying to display objects using angularjs. But in the html it appears as undefined.

app1.controller('ctrl1' , function($scope){ 
  categories = [];
  var dbRef = firebase.database().ref().child('Categories/');
  dbRef.once('value', snap => {

    snap.forEach(function(childSnap) {
      //CATEGORY MODEL
       var category = {
            name : "",
            id  : "",

            subCategories: {
              name: "",
              id: ""
            }

        };
      category.id = childSnap.val().id
      category.name = childSnap.val().name
      category.subCategories = childSnap.val().subCategories
      categories.push(category)
    })

  }).then(() => {
    $scope.allcats = categories;
  });
});

And the html

 <div id="nav-aside " class="nav" ng-controller="ctrl1">
              {{allcats}}
            <ul class="nav-aside-list" ng-repeat="categories in allcats">
              <li><span></span><a href="#">{{categories.name}}</a></li>
            </ul>
          </div>

This doesnt work. Anyone who can help? Thanks in advance!

Answer 1

Change your code to this:

app1.controller('ctrl1' , function($scope){ 
      $scope.allcats = [];
      var dbRef = firebase.database().ref().child('Categories/');
      dbRef.once('value', snap => {

        snap.forEach(function(childSnap) {
          //CATEGORY MODEL
           var category = {
                name : "",
                id  : "",

                subCategories: {
                  name: "",
                  id: ""
                }

            };
          category.id = childSnap.val().id
          category.name = childSnap.val().name
          category.subCategories = childSnap.val().subCategories
          $scope.allcats.push(category);
          $scope.$apply();
        })

      }).then(() => {
        console.log($scope.allcats);
      });
    });