I'm learning AngularJs and I'm facing a problem.
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.
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)
Reference code
Controller
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 < data.Contents.length; i++) {
$scope.objects.push(data.Contents[i].Key);
$scope.$apply();
}
}
});
});
View
Just an ng-repeat to show the data