<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.js"></script>
    <script src="https://cdn.firebase.com/libs/firebase-util/0.2.4/firebase-util.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <div class="container">
      <h2>Normalized collection</h2>
      <div class="col-md-12">
        <div class=" panel panel-default">
          <table class="table">
            <thead>
              <tr>
                <th>
                $value
              </th>
                <th>
                name
              </th>
                <th>
                age
              </th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="event in events">
                <td>{{event.$value}}</td>
                <td>{{event.name}}</td>
                <td>{{event.age}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>

</html>

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

app.controller('ctrl', function($scope, $firebaseArray) {

  var fb = new Firebase('https://55jmxlgpvw.firebaseio.com/competition1');

  var indexRef = fb.child('event1').orderByValue();
  var partRef = fb.child('participant');

  var participantsForEvent = new Firebase.util.NormalizedCollection(indexRef, partRef)
    .select('event1.$value', 'participant.name', 'participant.age')
    .ref();
    //.limitToLast(1);

  $scope.events = $firebaseArray(participantsForEvent);

});
/* Styles go here */