AngularJS 1.2.x

/*

Author: Sandeep Panda
FireBase Demo App

*/

angular.module('firebaseDemo', ['firebase', 'ngSanitize', 'ngRoute']);

angular.module('firebaseDemo').controller('BroadcastController', function($scope, broadcastFactory) {
  $scope.isEditable = false;
  $scope.broadcastName = '';
  $scope.isButtonEnabled = function() {
    return ($scope.broadcastName === 'undefined') || ($scope.broadcastName.length < 1);
  };
  $scope.startBroadcast = function() {
    $scope.isEditable = true;
    $scope.broadcastFromFireBase = broadcastFactory.getBroadcast($scope.broadcastName);
    $scope.broadcastFromFireBase.$set('');
    $scope.broadcastFromFireBase.$bind($scope, 'broadcast');
  };
});

angular.module('firebaseDemo').controller('BroadcastViewerController', function($scope, broadcastFactory) {
  $scope.dropdownMessage = 'Retrieving Broadcasts...';
  $scope.broadcasts = broadcastFactory.getAllBroadcasts();
  $scope.broadcastSelected = function() {
    $scope.broadcast = broadcastFactory.getBroadcast($scope.broadcastToView);
  }
  $scope.broadcasts.$on('loaded', function() {
    $scope.dropdownMessage = 'Select a broadcast';
  });
});

angular.module('firebaseDemo').factory('broadcastFactory', function($firebase, FIREBASE_URL) {
  return {
    getBroadcast: function(key) {
      return $firebase(new Firebase(FIREBASE_URL + '/' + key));
    },
    getAllBroadcasts: function() {
      return $firebase(new Firebase(FIREBASE_URL));
    }
  };
});

angular.module('firebaseDemo').directive('demoEditor', function(broadcastFactory) {
  return {
    restrict: 'AE',
    link: function(scope, elem, attrs) {
      scope.$watch('isEditable', function(newValue) {
        elem.attr('contenteditable', newValue);
      });
      elem.on('keyup keydown', function() {
        scope.$apply(function() {
          scope[attrs.model] = elem.html().trim();
        });
      });
    }
  }
});

angular.module('firebaseDemo').constant('FIREBASE_URL', 'https://angularfiredemo.firebaseio.com/broadcasts');

angular.module('firebaseDemo').config(function($routeProvider, $locationProvider) {
  $routeProvider.when('/write', {
    controller: 'BroadcastController',
    templateUrl: 'write.html'
  }).when('/view', {
    controller: 'BroadcastViewerController',
    templateUrl: 'view.html'
  }).otherwise({
    redirectTo: 'write'
  });
  $locationProvider.html5Mode(true);
});

<!DOCTYPE html>
<html ng-app="firebaseDemo">

<head>
  <meta charset="utf-8" />
  <title>AngularFire Demo</title>
  <link rel="stylesheet" href="style.css" />
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
  <script src="https://code.angularjs.org/1.2.16/angular-sanitize.js" data-semver="1.2.16"></script>
  <script src="https://code.angularjs.org/1.2.16/angular-route.js" data-semver="1.2.16"></script>
  <script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div class="container">
    <br/>
    <div class="row">
      <div class="col-xs-5 col-xs-offset-1 text-right">
        <a class="btn btn-lg btn-primary" href="write">Write Something</a>
      </div>

      <div class="col-xs-5 text-left">
        <a class="btn btn-lg btn-success" href="view">View a Broadcast</a>
      </div>
    </div>
    <div ng-view></div>
  </div>
</body>

</html>

#editor{
  background-color:#f2f2f2;
  min-height:200px;
  width:100%;
  outline: none;
  box-shadow: inset 0px 0px 15px #CCC;
  border-radius: 6px;
  border: .5px solid #CCC;
  margin-top: 15px;
}

	<hr/>
	<div class="row">
		<div class="col-xs-4 col-xs-offset-3">
			 <input type="text" class="form-control input-lg" ng-model="broadcastName" placeholder="Type your broadcast name here"/>
		</div>
		<div class="col-xs-5">	 
			 <button class="btn btn-lg btn-success" ng-click="startBroadcast()" ng-disabled='isButtonEnabled()'>Start</button>
		</div>	
	</div>	
	<h1 class="text-center">Write Something. . .</h1>
    <div class="row">
		<div class="col-xs-8 col-xs-offset-2">
			<div id="editor" demo-editor model="broadcast" class="well">
	    	</div>
		</div>
	</div>

<h1 class="text-center">Live Broadcast</h1>
<div class="row">
  <div class="col-xs-4 col-xs-offset-4">
    <select ng-model="broadcastToView" ng-change="broadcastSelected()" class="form-control" ng-options="k as k for (k, v) in broadcasts">
      <option value="">{{dropdownMessage}}</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col-xs-8 col-xs-offset-2">
    <div id="editor" class="well" ng-bind-html="broadcast.$value">
    </div>
  </div>
</div>