push into an array console log can see but won't render in html why? angularJS

Question

I have a testing db which works and when I am using console.log I can see the objects but when I try to render in html. It shows empty why?

my angular codes

var app = angular.module('startBet',['firebase']);
var ref = new Firebase("https://vsw.firebaseio.com");

app.controller("ibet", function($scope, $firebaseObject) {
   $scope.todos = [{act: 'complete', test: 'abc'},
        {act: 'not', test: 'bdb'}];

    $scope.bets = [];

    var ref2 = new Firebase("https://vsw.firebaseio.com/bets");
    ref2.once("value", function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key();
        var childData = childSnapshot.val();
        $scope.bets.push(childData);
        $scope.todos.push(childData);
      });
    });

    console.log($scope.todos);
    console.log($scope.bets);

my html

    <div class="bot-container" ng-app='startBet'>
        <div class="in-play" ng-controller='ibet'>
            <header><p>{{todos.length}}</p></header>
            <div class="bets-list">
                <div class="bet-title">
                    {{bets.length}}
                </div>

sorry for any closing tags. didn't bother to copy others I can see what I hard codes has the length of 2 which rendered in html and for the other one it's 0.

But in console.log I can see both showing all objects instead nothing or just those two hard coded though.

What am I missing here?

Thanks in advance.

Answer 1

You need to use ng-repeat to iterate the list:

<ul>
    <li ng-repeat="td in todos">{{td.act}}</li>
</ul>

Answer 2

The callback of the request to Firebase is probably not triggering the digest cycle to be run, so your DOM is not updating. Try wrapping the code in $timeout, which will trigger a digest cycle. (See this for a more detailed explanation.)

app.controller("ibet", function($scope, $firebaseObject, $timeout) {

...

var ref2 = new Firebase("https://vsw.firebaseio.com/bets");
ref2.once("value", function(snapshot) {
    $timeout(function() {
        snapshot.forEach(function(childSnapshot) {
            var key = childSnapshot.key();
            var childData = childSnapshot.val();
            $scope.bets.push(childData);
            $scope.todos.push(childData);
        });
    });
});

You may want to use AngularFire instead of the regular Firebase JavaScript API.