title: AngularJS + Firebase: Uncaught Document body has not initialized. Wait to initialize Firebase until after the document is ready
body: <p><a href="http://jsbin.com/jekimeze/1/edit" rel="nofollow"><strong>LIVE DEMO</strong></a></p>
  
  <p>I would like to use AngularFire to bind <code>$rootScope.demo</code> to the Firebase model. </p>
  
  <p><a href="http://jsbin.com/jekimeze/1/edit" rel="nofollow">Here is what I'm trying to do:</a></p>
  
  <hr>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="Demo"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Demo&lt;/title&gt;
  
    &lt;script src="//code.angularjs.org/1.3.0-beta.5/angular.js"&gt;&lt;/script&gt;
    &lt;script src="//code.angularjs.org/1.3.0-beta.5/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src='//cdn.firebase.com/js/client/1.0.11/firebase.js'&gt;&lt;/script&gt;
    &lt;script src="//cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>angular.module("Demo", ["ngRoute", "firebase"])
  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
  
    var resolve = {
      whatever: function ($q, $rootScope, $firebase) {
        var defer = $q.defer();
  
        // I use a different URL in my app as you might guess
        var demoRef = new Firebase("https://demo.firebaseio.com");
  
        $firebase(demoRef).$bind($rootScope, "demo").then(function() {
          defer.resolve($rootScope.demo);
        });
  
        return defer.promise;
      }
    };
  
    $routeProvider
      .when("/", {
        controller: function($scope) {
          $scope.message = "Hello World!";
        },
        template: "&lt;div&gt;{{ message }}&lt;/div&gt;",
        resolve: resolve
      })
      .otherwise({
        redirectTo: "/"
      });
  });
  </code></pre>
  
  <p>Unfortunately, I get the following error:</p>
  
  <blockquote>
    <p>Uncaught Document body has not initialized. Wait to initialize
    Firebase until after the document is ready.</p>
  </blockquote>
  
  <p>Why is that? How would you fix it?</p>
  
  <hr>
  
  <p><strong>BONUS QUESTION</strong></p>
  
  <p>Ideally, I'd like my Firebase model to live in a service rather than the <code>$rootScope</code>, but I wasn't sure how could I load the Firebase model into the service before the app bootstraps. Any ideas?</p>