Angular JS firebase.(child_added) not rendering on page

Question

I have entries in my firebase database that I am trying to get to show up on the html page. The console.log shows the children in the database, but it is not displaying on t

Answer 1

Firebase asynchronously loads and monitors data. Whenever (new or updated) data is available, your callback function is fired. Unfortunately at that point, AngularJS typically isn't ready to accept the changes anymore. That's why Firebase created AngularFire, which automatically notifies AngularJS when changes happen.

You seem to be partially using AngularFire, but not for this construct. I recomment either always using AngularFire for data that needs to be bound to the $scope or never using AngularFire. The choice is yours, but be consistent.

Using AngularFire:

        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        $scope.users = $firebaseArray(fireRef);

Not using AngularFire:

        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        fireRef.on('value', function(childSnapshot, prevChildKey) {
          $timeout(function() {
            console.log(childSnapshot.val());
            $scope.users = childSnapshot.val();
          };
        });

The $timeout construct tells AngularFire that you're modifying the $scope.

Note that binding arrays to the scope is covered in every piece of AngularFire documentation we have: the AngularFire quickstart, the AngularFire guide and the AngularFire API docs. Please read them, they contain many other useful bits.