title: Angular.js view doesn't update when nested $scope array is updated
body: <p>I am trying to make an angular.js view update itself when adding a comment. My code is as follows:</p>
  
  <pre><code>&lt;div class="comment clearfix" data-ng-repeat="comment in currentItem.comments" data-ng-class="{bubble: $first}" data-ng-instant&gt;
      &lt;div&gt;
          &lt;p&gt;
              &lt;span class="username"&gt;{{comment.user}}&lt;/span&gt; {{comment.message}}
          &lt;/p&gt;
          &lt;p class="time"&gt;
              10 minutes ago
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="comment reply"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span1"&gt;
              &lt;img src="assets/img/samples/user2.jpg" alt="user2" /&gt;
          &lt;/div&gt;
          &lt;div class="span11"&gt;
              &lt;textarea class="input-block-level addComment" type="text" placeholder="Reply…"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the scope is updated on enter:</p>
  
  <pre><code>$('.addComment').keypress(function(e) {
      if(e.which == 10 || e.which == 13) {
          $scope.currentItem.comments.push({
              "user": "user3",
              "message": $(this).val()
          });
          console.debug("currentItem", $scope.currentItem);
      }
  });
  </code></pre>
  
  <p>debugging $scope.currentItem shows that the comment has been added to it, however the view doesn't show the new comment. I suspect that the $scope is only being watched on its first level and that this is why the view doesn't update. is that the case? If so how can I fix it?</p>
  
  <p>SOLUTION:
  As Ajay suggested in his answer below I wrapped the array push into the apply function like this:</p>
  
  <pre><code>var el=$(this);
  $scope.$apply(function () {
       $scope.currentChallenge.comments.push({
           "user": $scope.currentUser,
           "message": el.val()
       });
  });
  </code></pre>