JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.firebase.com/js/client/2.2.5/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js"></script>
<div ng-app="BooksApp">
    
    <div ng-controller="BooksCtrl">
        
        <ul>
            
            <li ng-repeat="book in books">
                <em>{{book.title}}</em> by {{getAuthorName(book.author).name}}.<br /><small>Published in {{book.publishDate}}.</small></li>
            
        </ul>
        
    </div>
    
</div>

JavaScript

var app = angular.module("BooksApp", ["firebase"]);

app.controller("BooksCtrl", function($scope, $firebaseArray, $firebaseObject, $q){
    var fburl = "https://dev-2490.firebaseio.com";
    var booksRef = new Firebase(fburl + "/books");
    var books = $firebaseArray(booksRef);
    $scope.books = books;
    
    var authors = {};
    
    $scope.getAuthorName = function(authorId){
        if(!authors[authorId]){
            var authorRef = new Firebase(fburl + "/authors/" + authorId);            
             authors[authorId] = $firebaseObject(authorRef);
        }
        return authors[authorId];
    };
});