Error in the output of a chat app - Angular.JS
<p>I am following a MVA course and the objective of the module is to built a Chat App using Angular JS. When the instructor ran the code the output was as expected.</p>

<p><strong>Expected Output:</strong>
When the name and message are entered in the input field, the output should display the name and message entered in the above input field and also the time when they entered the data once the button is clicked. </p>

<p>The following is the code:</p>

<p><strong>HTML:</strong>  </p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Chirp&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="javascripts/chirpApp.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="stylesheets/style.css"&gt;
  &lt;/head&gt;
  &lt;body ng-app="chirpApp"&gt;
    &lt;div id='main' class="container" ng-controller="mainController"&gt;
      &lt;div class="col-md-offset-2 col-md-8"&gt;
        &lt;div class="clearfix"&gt;
          &lt;form ng-Submit="post()"&gt;
            &lt;input required type="text" class="form-control" placeholder="Your name" ng-model="newPost.created_by" /&gt; 
            &lt;textarea required class="form-control" maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"&gt;&lt;/textarea&gt;
            &lt;input class="btn submit-btn pull-right" type="submit" value="Chirp!" /&gt;
          &lt;/form&gt;
          &lt;div id="post-stream"&gt;
            &lt;h4&gt;Chirp Feed&lt;/h4&gt;
                &lt;div class="post" ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'"&gt; 
                  &lt;p&gt;{{post.text}}&lt;/p&gt;
                &lt;small&gt;Posted by @{{post.created_by}}&lt;/small&gt;
                &lt;small class="pull-right"&gt;{{post.created_at | date:"h:mma 'on' MMM d, y"}}&lt;/small&gt;
                &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>var app = angular.module('chirpApp', []);

app.controller('mainController', function($scope){
  $scope.posts = [];
  $scope.newPost = {created_by: '', text: '', created_at: ''};

  $scope.post = function(){
    $scope.newPost.created_at = Date.now();
    $scope.posts.push($scope.newPost);
    $scope.newPost = {created_by: '', text: '', created_at: ''};
  };
});
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>body {
    padding-top:70px;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

a {
    color: #00B7FF;
}

.submit-btn {
    background-color: #b1dbff;
    margin: 10px 0 10px 0;
}

.post {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.odd {
    background-color: #f2f9ff;

}
.even {
    background-color: #eceff3;
}

.form-auth {
    max-width: 330px;
    padding: 5px;
    margin: 0 auto;
}
</code></pre>

<p><em>The code is available on their github account from which I copy pasted it, so I don't think it's a problem with the code.</em></p>

<p>When I open the page, the following gets displayed: </p>

<blockquote>
  <p>{{post.text}} Posted by @{{post.created_by}} {{post.created_at | date:"h:mma 'on' MMM d, y"}}</p>
</blockquote>

<p>which is not the desired output.</p>

<p>Any help on this would be appreciated! </p>