JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://firebase.github.io/angularFire/angularFire.js"></script>
<body ng-app="foo">
<div>Angular Test</div>
<div ng-controller="MyCtrl">
Welcome to site {{site.name}}
<hr>
  <ul ng-repeat="tool in tools">
    <li>{{tool.name}} {{ tool.description}}  </li>
  </ul>
</div>
</body>

JavaScript

angular.module("foo", ["firebase"]).
controller("MyCtrl", ["$scope", "angularFire", '$timeout', function($scope, angularFire, $timeout) {
  var dbRef = "https://sampledb.firebaseio.com";
  var promise  =  angularFire(dbRef + "/sites/s001", $scope, "site", {});
  promise.then(function() {
        $scope.tools = [];
        angular.forEach($scope.site.tools, function(toolId) {
            getTool(dbRef, toolId);
        });
  });

var getTool = function(dbRef,toolId) {
    console.log("Gettingtool ID: " + toolId);
    var toolRef = new Firebase(dbRef + "/tools/" + toolId);
    toolRef.once('value', function(snapshot) {
          console.log(angular.toJson(snapshot.val()));
          $scope.tools.push(snapshot.val());
          //$scope.$apply();
    });
};

}]);