title: watching array changes inside Angular controller and update HTML
body: <p>I want to watch an array changes inside <code>Angular</code> controller and update HTML view.</p>
  
  <p>this is my controller:</p>
  
  <pre><code>app.controller("timelineCtrl", function ($scope) {
      $scope.arr=[];
           .
           .
           .
  }
  </code></pre>
  
  <p>this is my directive:</p>
  
  <pre><code>app.directive('helloWorld', function() {
      return {
          restrict: 'AE',
          replace: true,
          template: '&lt;div&gt; Hello {{arrayItem}} &lt;/div&gt;',
  
          link: function ($scope, element, attrs) {
  
              $scope.$watch($scope.arr, function(newValues, oldValues) {
                  $scope.arrayItem = newValues;
              });
  
          }
      };
  });
  </code></pre>
  
  <p>I add some new values to array via button click but my <code>$watch</code> doesn't work. How can i overcome this?</p>