アレイコンソールログにプッシュするとHTMLが表示されますがレンダリングされません。なぜですか？ angularJS

Question

私は動作するテスト用データベースを持っています。私がconsole.logを使用しているとき、私はオブジェクトを見ることができますが、私はhtmlでレンダリングしようとします。それはなぜ空を示していますか？

私の角度コード

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); 

私の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> 

任意の終了タグのため申し訳ありません。 ハードコードの長さは2で、HTMLではレンダリングされ、もう1つは0であることがわかります。

しかし、console.logでは、両方ともすべてのオブジェクトを表示していますまたはそれらのハードコーディングされた2つだけ。

私はここで何が欠けていますか？

ありがとうございます。

Answer 1

あなたは、リストを反復するng-repeatを使用する必要があります。

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

Answer 2

Firebaseへの要求のコールバックは、おそらく実行されるように、ダイジェスト・サイクルをトリガされていないので、あなたのDOMが更新されていません。 $timeoutにコードをラップすると、ダイジェストサイクルが発生します。 （詳細な説明のためのthisを参照してください。）

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); 
     }); 
    }); 
}); 

あなたが代わりに通常のFirebaseのJavaScript APIのAngularFireを使用することもできます。