title: Angular.js: How to update data from one HTML to other HTML which uses same controller
body: <p>I have following 2 html pages</p>
  
  <p><strong>1. home.html</strong></p>
  
  <pre><code>&lt;div data-ng-controller="userComments"&gt;
  
           &lt;Will display all the comments&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>2. comments.html</strong></p>
  
  <pre><code>&lt;div data-ng-controller="userComments"&gt;
  
           &lt;Have a comment box and submit button. 
           Submit button calls submit() function on ng-click&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>where <code>comments.html</code> is pop-up which is initiated from the home page.
  And <strong>controller</strong></p>
  
  <pre><code>    .controller('userComment',['$scope', function($scope){
          $scope.title = 'User Comment';
          $scope.comments = &lt;db call&gt;
          $scope.cmt = '';
          $scope.submit = function(){
              console.log("comment just entered", $scope.cmt);
              $scope.comments = $scope.comments.concat($scope.cmt);
              console.log("Updated Comments", $scope.comments);
              };
      }])
  </code></pre>
  
  <p>New comments need to be updated automatically in the <code>home.html</code> as well. What should i do to accomplish that?</p>
  
  <p>Thanks</p>
  
  <p><strong>Update:</strong></p>
  
  <p>when the comments are added in the <code>comment.html</code> page, <code>ng-click</code> triggers <code>submit</code> function, <code>$scope.comments</code> gets updated with the new comment, but what should i do to get the updated comments in the <code>home.html</code> too?</p>