Angular: PubNub Chat

http://angularjs.org/ http://pubnub.com

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div pub-key="pub-8e474368-7add-4283-9b87-caf9efbcdedc" sub-key="sub-1ffec1f3-9463-11e1-9376-77819258e702" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
<script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>

<div ng-controller="MyCtrl">
    <div class="progress progress-striped active" id="progress_bar">
      <div class="bar" style="width: 100%;"></div>
    </div>
    <div class="well">
    <b>Status: {{realtimeStatus}} </b>
        <form class="form-horizontal">
            <label>Name:</label> <input placeholder="Your Name" type="text" name="username" ng-model="message.username"/> <br/>
<label>Email:</label> <input placeholder="Your Email" type="text" name="email" ng-model="message.email"/> <br/>             
            <label>Message:</label> <input placeholder="What's on your mind?" type="text" name="text" ng-model="message.text"/> 
              
            <button type="submit" ng-click="publish()" class="btn btn-primary">Send</button>     
        </form>
        <hr/>
        
        
<!-- Message List -->
<div id="messages" class="table-striped">
    <div class="message" ng-repeat="message in messages" cool-fade>
    <div class="avatar-frame">
    <img ng-src="http://www.gravatar.com/avatar/{{message.email}}?s=60&r=R&d=https://www.guardly.com/commonassets/images/img_profile_placeholder.png" class="avatar avatar-60 photo" height="60" width="60"/>
    </div>
    <p class="user">{{message.username}} said:</p>
        <p class="text">{{message.text}}</p>
    </div>
</div>

CSS

#messages div.message {
    border-bottom: solid #fff 1px;
    padding: 0.7em;
    font-family: 'Chau Philomene One', sans-serif;
    height: 58px;
   
}
#messages div.message p {
    margin: 0.2em;
    padding: 0;
    color: #333;
}
#messages div.message p.user {
    font-weight: bold;
}


#messages .avatar-frame{float: left; margin-right:10px; padding:0px; border: 2px solid #fff;}
#messages .avatar-frame,.avatar-frame img {
width: 50px;
height: 50px;
-webkit-border-radius: 10px; /* Saf3+, Chrome */
border-radius: 10px; /* Opera 10.5, IE 9 */
/*-moz-border-radius: 30px; Disabled for FF1+ */
float: left;
margin-right: 14px;
}


label{
font-weight:bold;            
}

.well, #progress_bar{
 border-radius:0;   
 margin-top:0;
}

.bar,#progress_bar{
    width:100%;
    margin-bottom:0;
}

JavaScript

var myApp = angular.module('PubNubChat',[]).directive('coolFade', function() {
    return {
      compile: function(elm) {
        //console.log('compiling');
        $(elm).css('opacity', 0);
        return function(scope, elm, attrs) {
         // console.log('animating');
          $(elm).animate({ opacity : 1.0 }, 1000 );
        };
      }
    };
  });


//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    
    $scope.messages = [];
    $scope.realtimeStatus = "Connecting...";
    $scope.channel = "pubnub_chat";
    $scope.limit = 20;

    //publish a chat message
    $scope.publish = function(){
        
        //toggle the progress bar
        $('#progress_bar').slideToggle();
        
         PUBNUB.publish({
                channel : $scope.channel,
                message : $scope.message
            }) 
             
        //reset the message text
       $scope.message.text = "";
    }
        
    //gets the messages history   
    $scope.history = function(){
        PUBNUB.history( {
            channel : $scope.channel,
            limit   : $scope.limit
        }, function(messages) {
            // Shows All Messages
            $scope.$apply(function(){
                $scope.messages = messages.reverse();          
                
            }); 
        } );
     }
         

   //we'll leave these ones as is so that pubnub can
   //automagically trigger the events
   PUBNUB.subscribe({
        channel    : $scope.channel,
        restore    : false, 
    
        callback   : function(message) { 
            
            //toggle the progress_bar
            $('#progress_bar').slideToggle();         
         
            $scope.$apply(function(){
                $scope.messages.unshift(message);          
                
            }); 
        },
    
        disconnect : function() {   
            $scope.$apply(function(){
                $scope.realtimeStatus...