Why doesn’t the data appear on the screen using firebase and angular?

Question

Good afternoon, you guys, Something that should be simple and I can’t. I’m checking my database at firebase, where you have two records stored. I do the search and appear returns the data in the console, using console.log(), HOWEVER, I can not display this data on the screen, where it should appear!!!

app.controller('ListagemCtrl', function($scope, $rootScope, $location, $firebaseObject){
$rootScope.activetab = $location.path();

$scope.filmesCadastrados = [];

firebase.database().ref('filmes/').once('value').then(function (snapshot) {
    for(var id in snapshot.val()){

        var filme = snapshot.val()[id];
        console.log(filme);

        $scope.filmesCadastrados.push(filme);
    }
});

});

And this is my HTML:

<div ng-controller="ListagemCtrl">
  <table class="table table-striped" >
    <tbody>
        <tr> 
            <th>Título do Filme</th>
            <th>Diretor</th>
            <th>Categoria</th>
            <th>Duração</th>
        </tr>
        <tr ng-repeat="filme in filmesCadastrados">
            <td>{{filme.titulo}}</td>
            <td>{{filme.diretor}}</td>
            <td>{{filme.categoria}}</td>
            <td>{{filme.duracao}}</td>
        </tr>
    </tbody>
    </table>
</div>

This displays on the console: Where am I going wrong?

Answer 1

The update, triggered by a Promise firebase, is not firing the cycle $digest Angular. Use the service $timeout, that provides a wrapper that invokes the cycle, to provoke the delay by the Angular:

app.controller('ListagemCtrl', function($scope, $rootScope, $timeout, $location, $firebaseObject){
  $rootScope.activetab = $location.path();

  $scope.filmesCadastrados = [];

  firebase.database().ref('filmes/').once('value').then(function (snapshot) {

    $timeout(function(snapshot) {

      for(var id in snapshot.val()){

        var filme = snapshot.val()[id];
        console.log(filme);

        $scope.filmesCadastrados.push(filme);
      };

    }, 1);
  });
});

Answer 2

Do it:

$scope.filmesCadastrados.push({
    titulo: filme.titulo,
    diretor: filme.diretor,
    categoria: filme.categoria,
    duracao: filme.duracao
})