JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.js"></script>
<div  ng-app="app" ng-controller="peopleController">
<ul>
    <li ng-repeat="(pid, person) in people| orderBy: 'name'" ng-click="cpSelect(pid)">{{pid}} {{person.name}} has {{person.has}}</li>
</ul>
<span>{{currentPerson.name}}</span>
</div>

CSS

pre {
    padding: 50px;
    background-color: #eee;
}

JavaScript

angular.module('app', ['firebase']).  constant({FirebaseUrl:"https://bobtest.firebaseio.com/"}).        controller('peopleController',function($scope, angularFire, FirebaseUrl){
            var fb = new Firebase(FirebaseUrl);
            angularFire(fb, $scope, 'remotePeople', {}).then(function(unbind){
                $scope.unbindPeople = unbind;
                $scope.people = angular.copy($scope.remotePeople);
                
                $scope.cpSelect=function(cpid){
                    $scope.cpid = cpid;
                    $scope.currentPerson = $scope.people[cpid];
                };
            });
        });
;