title: $scope array and $scope.$apply in angularjs
body: <p>I'm learning AngularJs and I'm facing a problem.</p>
  
  <p>I want to show an array of items in a view. First in the controller I define the array using $scope.arrName = [], then I receive data from a third party service and add it to the array with $scope.arrName.push(data[i]). I figured it out that in order to my view render the changes I have to insert $scope.$apply after pushing data to the array.</p>
  
  <p>Is there a way to modify the array and render the changes without $scope.$apply?
  Why code breaks if I change $scope.arraName with this.arrName? (it throws Uncaught TypeError: Cannot read property 'push' of undefined)</p>
  
  <p>Reference code</p>
  
  <p>Controller</p>
  
  <pre><code>angular.module('testApp')
    .controller('testCtrl', function($scope) {
  
      $scope.objects = [];
  
      var service = new thirdPartyService();
  
      service.getData(function(err, data) {
        if (err) {
          console.log('Error');
        } else {
          for (var i = 0; i &lt; data.Contents.length; i++) {
            $scope.objects.push(data.Contents[i].Key);
            $scope.$apply();
          }
        }
      });
    });
  </code></pre>
  
  <p>View</p>
  
  <p>Just an ng-repeat to show the data</p>