<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <script data-require="firebase@*" data-semver="2.2.2" src="//cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
    <script data-require="angularfire@1.0.0" data-semver="1.0.0" src="//cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="MainCtrl as view">
    <label>Name: </label><input type="text" ng-model="view.name"/><br><br>
    <label>Message:</label><br>
    <textarea type="text" ng-model="view.text"></textarea><br>
    <button ng-click="view.addMessage(view.name, view.text)">Send</button>
    <button ng-click="view.clearAll()">Clear all messages</button>
    <hr />
    <p ng-repeat="message in view.messages"><strong>{{message.from}}: </strong>{{message.body}}</p>
  </body>
</html>
// Define the app
angular.module('app', ['firebase']);

// Main Controller
angular.module('app').controller('MainCtrl', MainCtrl);

MainCtrl.$inject = ['$scope', 'firebaseService'];

function MainCtrl($scope, firebaseService) {
  var view = this;
  view.name = "";
  view.from = "";
  view.messages = firebaseService.getMessages();
  view.addMessage = firebaseService.addMessage;
  view.clearAll = firebaseService.clearMessages;
}

// A simple service to wrap AngularFire
angular.module('app').factory('firebaseService', firebaseService);

firebaseService.$inject = ['$firebaseArray'];

function firebaseService($firebaseArray) {
  var messagesUrl = new Firebase("https://blistering-fire-2068.firebaseio.com/messages");
  var messages = $firebaseArray(messagesUrl);
  
  return {
    getMessages : getMessages,
    addMessage : addMessage,
    clearMessages : clearMessages
  };
  
  function getMessages() {
    return messages;
  }
  
  function addMessage(from, body) {
    from = from || "anon.";
    messages.$add({from: from, body: body});
  }
  
  function clearMessages() {
    messages.forEach(messages.$remove);
  }
}
/* Styles go here */

html {
  font-family: Arial;
}