Now "done", angular should have tests written but i'm out of time.

twilio/app/assets/javascripts/messages.js

@@ -4,29 +4,45 @@
     app.controller('MessagesController', function($scope, Restangular){
         $scope.baseMessages = Restangular.all('messages');
 
-        $scope.baseMessages.getList().then(function(messages){
-            $scope.messages = messages;
-        });
+        $scope.baseMessages.refresh = function(){
+            $scope.baseMessages.getList().then(function(messages){
+                $scope.messages = messages;
+            })
+        };
+
+        $scope.baseMessages.remove = function(message){
+            message.remove();
+            $scope.baseMessages.refresh();
+        };
+
+        $scope.baseMessages.refresh();
+
     });
 
-    app.directive('messageForm', function(){
+    app.directive('messageForms', function(){
         return {
             restrict: "E",
-            templateUrl: 'message-form.html'
+            templateUrl: 'message-forms.html'
         }
     });
 
     app.controller('MessageController', function($scope, $timeout){
-        this.delete = function(message){
-            message.remove();
-        };
-
-        this.create = function(message){
-            $scope.baseMessages.post(message);
-        };
-
         var timeout = null;
         var debounceUpdate = function(new_message, old_message){
+            if(!new_message.id){
+                if($scope['message__form'].$valid){
+                    if(timeout){
+                        $timeout.cancel(timeout);
+                    }
+                    timeout = $timeout(function(){
+                        $scope.baseMessages.post(new_message);
+                        $scope.baseMessages.refresh();
+                    }, 1000);
+                }
+
+                return;
+            }
+
             if(new_message == old_message || $scope['message_' + new_message.id + '_form'].$invalid){
                 return;
             }

twilio/app/assets/javascripts/templates/message-form.html.haml

@@ -1,4 +1,4 @@
-.message.panel.panel-default.col-md-4{"ng-repeat" => "message in messages", "ng-controller" => "MessageController"}
+.message.panel.panel-default.col-md-4{"ng-controller" => "MessageController"}
   %form{"novalidate" => true, "name"=>"message_{{message.id}}_form"}
     .panel-heading.text-center <input placeholder="title" name="title" class="form-control" type="text" ng-model="message.title" required />
     .panel-body
@@ -6,18 +6,20 @@
       %span{"ng-show" => "message_{{message.id}}_form.body.$dirty && message_{{message.id}}_form.body.$invalid"} Invalid body
       %span{"ng-show" => "message_{{message.id}}_form.secret.$dirty && message_{{message.id}}_form.secret.$invalid"} Invalid secret
       .form-group
-        %label Message Body <input placeholder="body" name="body" class="form-control" type="text" ng-model="message.body" required />
+        %label Message Body <textarea placeholder="body" name="body" class="form-control" type="text" ng-model="message.body" required />
       .form-group
         %label Message Secret <input placeholder="secret" name="secret" class="form-control" type="number" ng-model="message.secret" required />
-      .form-group
+      .form-group{"ng-show" => "message.created_at"}
         %label Created
         {{message.created_at | date:"short"}}
-      .form-group
+      .form-group{"ng-show" => "message.updated_at"}
         %label Last Updated
         {{message.updated_at | date:"short"}}
       .form-group
         %label Disabled? <input class="form-control" type="checkbox" ng-model="message.disabled" />
-      .panel.panel-default
+      .form-group
+        <button class="btn btn-default" ng-click="baseMessages.remove(message)" ng-show="message.id">Delete</button>
+      .panel.panel-default{"ng-show" => "message.call_logs"}
         .panel-heading Call Logs
         .panel-body
           .panel.panel-default.call_log{"ng-repeat" => "log in message.call_logs"}

twilio/app/assets/javascripts/templates/message-forms.html.haml

@@ -0,0 +1,2 @@
+%div{"ng-repeat" => "message in messages"}
+  %ng-include{"src"=>"'message-form.html'"}

twilio/app/assets/stylesheets/message.css.css

@@ -1,6 +1,5 @@
-.message {
-  padding: 0px;
-  margin: 15px; }
+.create_form {
+  margin: 30px; }
 
 .message .panel-heading {
   font-weight: bold; }

twilio/app/assets/stylesheets/message.css.scss

@@ -2,9 +2,8 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.message {
-    padding: 0px;
-    margin: 15px;
+.create_form{
+    margin: 30px;
 }
 
 .message .panel-heading {

twilio/app/controllers/messages_controller.rb

@@ -1,6 +1,6 @@
 class MessagesController < ApplicationController
   def index
-    render json: Message.all
+    render json: Message.all.order('updated_at DESC')
   end
 
   def show

twilio/app/views/home/index.html.haml

@@ -3,9 +3,11 @@
 - content_for :head do
   = javascript_include_tag 'messages'
 
-%h1.text-center Messages
 %div{"ng-app" => "messages"}
-  .new-form.text-center
-    %input{"type"=>"button", "ng-click"=>"", "value"=>"Add new message"}
   .messages{"ng-controller" => "MessagesController"}
-    %message-form
+    .clearfix.create_form
+      %h1 New Message
+      %ng-include{"src"=>"'message-form.html'", "ng-init"=>"message = {}"}
+    %hr
+    %h1.text-center Messages
+    %message-forms