title: View not updating after change to array in AngularJS
body: <p>In AngularJS, I am trying to add a new item to an array. The item gets added correctly, but the display does not reflect the change.</p>
  
  <p><strong>Add new task:</strong></p>
  
  <pre><code> $scope.addNewTask = function() 
   {  
      console.log( "Before: " + $scope.tasks.length );
  
      $scope.newTask = [
          {
              id:     '3',
              title:  'Get answer'
          }
      ];
  
      $scope.tasks.push( $scope.newTask[0] );
  
      console.log( "After: " + $scope.tasks.length ); // one more than before
  };
  </code></pre>
  
  <p><strong>Task array:</strong></p>
  
  <pre><code>$scope.tasks = [
      {
          id:     '1',
          title:  'Run into problem'
      },
      {
          id:     '2',
          title:  'Ask question'
      }
  ];
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li ng-repeat="task in tasks&gt;
          {{ task.id }} {{ task.title }}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>While I can see on the console that the new item was added, the list is not updating to reflect the change.</p>
  
  <p>Edit: Don't know if it makes any difference, but the function is called upon clicking the submit button of a form as follows:</p>
  
  <pre><code>&lt;form class="newtask-form" ng-submit="addNewTask()"&gt;
      &lt;input type="submit" name="submit" value="Add new task" /&gt;
  &lt;/form&gt;
  </code></pre>