Angular application does not update (dirt check) after an asynchronous call in firebase

Question

I am using a single page angular app for my blog. When loading, the controller makes a call to my firebase for all blog posts and pops them into the $ scope.posts array. HTML uses ng-repeat to display a snippet of each blog post. However, no fragments are displayed at all unless the user activates some other random function on the page to force a digest loop. How can I make this a dirty check or force a digest loop without user interaction?

angular.module('evancodes.main', [])
.controller('MainController', function(Main, $http, $scope) {
    $scope.posts = [];
    $scope.getAllPosts = function() {
        var ref = new Firebase("https://MYFIREBASENAME.firebaseio.com/");
        ref.on("value", function(snapshot) {
            var posts = snapshot.val();
            for (var post in posts) {
                $scope.posts.push(posts[post]);
            }
        }, function (errorObject) {
          console.log("The read failed: " + errorObject.code);
        });
    }
    $scope.getAllPosts();
})

HTML:

<div class="snippets col-md-9 col-md-offset-1" ng-repeat="post in posts | limitTo: 5">
  <a href="#/posts/{{post.url}}">
      <div class="snippetTitle"> 
          {{post.title}}
      </div>
      <div class="snippetBody" ng-bind-html="post.content | limitTo: 650"></div>
  </a>
</div>

Answer 1

, Angular . . $apply() :

        ref.on("value", function(snapshot) {
            var posts = snapshot.val();
            for (var post in posts) {
                $scope.posts.push(posts[post]);
            }
            $scope.$apply(); // RUN DIGEST HERE
        }, function (errorObject) {

, AngularFire, . https://www.firebase.com/docs/web/libraries/angular/index.html