title: Render user message and response only after clicking button
body: <p>I'm building a small chat app that simulates a conversation based on a few pre-defined messages and responses that are triggered by the user. When the user selects a persons name from the list, a message will appear. When the user types a message, it isn't supposed to show until the send button is clicked. After the user has sent their response, the application should then send the pre-defined response from the messages array after 2 seconds.</p>
  
  <p><strong>The controller with directives</strong></p>
  
  <pre><code>var chatApp = angular.module("chatApp",['firebase']);
  
  chatApp.controller("chatController",function($scope, $firebaseArray){
    var myUsers = new Firebase('https://chat-4477b.firebaseio.com/users');
     $scope.users = $firebaseArray(myUsers);
      $scope.messages = [{
          user:"aleksandra",
          message:"Aleksandra: this is aleksandras message",
          response:"a response from aleksandra",
          showDetails: false
        },
        {
          user:"evan",
          message:"Evan: this is evan message",
          response:"a response from evan",
          showDetails: false
        },
        {
          user:"tom",
          message:"Tom: this is toms message",
          response:"a response from tom",
          showDetails: false
        },
        {
          user:"jarid",
          message:"Jarid: this is jarids message",
          response:"a response from jarid",
          showDetails: false
        }];
        $scope.sendMessage = function(response){
          $scope.response = [];
          $scope.response.push(response);
          console.log(response);
        };
  });
  
  chatApp.directive("usersList", function(){
      return {
          restrict: "E",
          scope: false,
          template: "&lt;p&gt;Users&lt;/p&gt;"+
              "&lt;ol class='list-unstyled animated fadeInDown'&gt;"+
                "&lt;li ng-repeat='message in messages'&gt;"+
                  "&lt;a ng-click='toggleDetails(message)'&gt;{{message.user}}&lt;/a&gt;"+
                "&lt;/li&gt;"+
              "&lt;/ol&gt;"
          ,
          link: function(scope) {
            scope.toggleDetails = function(message)
            {
              angular.forEach(scope.messages, function(value, key){
                if(message != value)
                  value.showDetails = false;
              });
              message.showDetails =  !message.showDetails;
            }
  
          }
      }
  
  });
  
  chatApp.directive("messagesList", function(){
      return {
          restrict: "E",
          scope: false,
          template: "&lt;div class='panel panel-primary'&gt;"+
              "&lt;div class='panel-heading'&gt;"+
                  "&lt;span class='glyphicon glyphicon-comment'&gt;&lt;/span&gt; Chat&lt;/div&gt;"+
              "&lt;div class='panel-body body-panel'&gt;"+
                "&lt;ol class='list-unstyled'&gt;"+
                  "&lt;li ng-repeat='message in messages | filter:{showDetails:true}'&gt;"+
                      "&lt;p&gt;{{message.message}}&lt;/p&gt;"+
                  "&lt;/li&gt;"+
                  "&lt;p&gt;Matt: {{response}}&lt;/p&gt;"+
                  "&lt;p&gt;{{messages.response}}&lt;/p&gt;"+
                "&lt;/ol&gt;"+
              "&lt;/div&gt;"+
              "&lt;div class='panel-footer clearfix'&gt;"+
                "&lt;form name='form'&gt;"+
                  "&lt;input type='text' name='message' ng-model='response' class='form-control' /&gt;"+
                  "&lt;span class='col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12' style='margin-top: 10px'&gt;"+
                      "&lt;button class='btn btn-warning btn-lg btn-block' id='btn-chat' ng-click='sendMessage(messages)' ng-disabled='!form.message.$dirty'&gt;Send&lt;/button&gt;"+
                  "&lt;/span&gt;"+
                "&lt;/form&gt;"+
              "&lt;/div&gt;"+
          "&lt;/div&gt;"
          };
  });
  </code></pre>
  
  <p>In the current state, the app is loading the message as it should, but when the user types a response, it automatically shows due to the <code>{{response}}</code> being set within the message box. I'm trying to get it to only show the response on click using:</p>
  
  <pre><code>$scope.sendMessage = function(response){
      $scope.response = [];
      $scope.response.push(response);
      console.log(response);
  };
  </code></pre>
  
  <p>which should be triggered by: <code>ng-click='sendMessage(messages)'</code></p>
  
  <p>However, the current state is showing the message in the chat box before hitting submit, though it should be coming from the <code>$scope.response = [];</code> array on click.</p>
  
  <p>I've tried using a timeout function like this:</p>
  
  <pre><code>  function chatApp($timeout, $scope){
        $scope.sendMessage = function(response){
          $timeout(function(){
          $scope.response = [];
          $scope.response.push(response);
          console.log(response);
        }, 2000);
      };
    }
  </code></pre>
  
  <p>but it isn't having any affect. </p>
  
  <p>So to recap: The app loads with the current users name and an empty prompt. When the user clicks a name from the right, the name will show in the chat box, along with the predefined initial message. When the user enters a response, the response should <strong>only</strong> show in the chat history when the user hits the send button. Within that same function, there should be a timeout that triggers the pre-defined response to show after 2 seconds. I'm stuck on how to keep the response from showing until the user hits send, allowing the timeout function to run and show the predefined response afterward.</p>
  
  <p><strong>Here is a plunker for the current state:</strong> <a href="http://plnkr.co/edit/upu3WqcWQ4kw45KqqDi7?p=preview" rel="nofollow noreferrer">LINK</a></p>