Q: angularjs filling array from another array (Very new at angularjs)Tried filling array by parsing csv file, as I checked I managed to do it, it perfectly writes everything into $scope.videos array. But when I wanted to split that array on page load by doing init() function, and keep filling it on scroll, but I just get this error, on first try to push array variable.  
TypeError: Cannot read property 'frame' of undefined
at init (MainController.js:33)
at new <anonymous> (MainController.js:45)
at Object.invoke (angular.js:4709)
at R.instance (angular.js:10234)
at m (angular.js:9147)
at g (angular.js:8510)
at angular.js:8390
at angular.js:1756
at m.$eval (angular.js:17444)
at m.$apply (angular.js:17544)




mvcApp.factory('parseCSV', ['$http', function($http) {
        return $http.get('http://hosting.com/videos/export_projects.csv')
            .success(function(data) {
                return data;
            })
            .error(function(err) {
                return err;
            });
    }]);

mvcApp.controller('indexController_main', ['$scope', '$sce', 'parseCSV', function($scope, $sce, parseCSV) {
    $scope.videos = [];
    parseCSV.success(function(data) {
        $scope.csv = data;
        var lines, lineNumber, data, length;
        lines = $scope.csv.split('\n');
        for(var i = 0; i < lines.length; i++) {
            data = lines[i].split(',');
            var frame = data[0];
            var title = data[1];
            $scope.videos.push({
                frame : frame,
                title : title
            });
        }
    });
    $scope.firstColumnVideos = [];
    $scope.secondColumnVideos = [];
    var init = function() {
        for(var i = 0; i < 3; i++) {
            $scope.firstColumnVideos.push({
                frame: $scope.videos[0].frame,
                title: $scope.videos[0].title
            });
            $scope.videos.splice(0, 1);
            $scope.secondColumnVideos.push({
33.             frame: $scope.videos[0].frame,
                title: $scope.videos[0].title
            });
            $scope.videos.splice(0, 1);
        }
        console.log($scope.firstColumnVideos);
    };
    init();
    $scope.loadMore = function() {
        for(var i = 0; i < 2; i++) {
            $scope.firstColumnVideos.push({
                frame: $scope.videos[0].frame,
                title: $scope.videos[0].title
            });
            $scope.videos.splice(0, 1);
            $scope.secondColumnVideos.push({
                frame: $scope.videos[0].frame,
                title: $scope.videos[0].title
            });
            $scope.videos.splice(0, 1);
        }
    };
    $scope.putIframe = function(video) {
        return $sce.trustAsHtml(video.frame);
    };
}]);


A: parseCSV.success is an asynchromous call, so you won't get data back immediately. You have to move init() to the success callback of parseCSV.

parseCSV.success(function(data) {
        $scope.csv = data;
        var lines, lineNumber, data, length;
        lines = $scope.csv.split('\n');
        for(var i = 0; i < lines.length; i++) {
            data = lines[i].split(',');
            var frame = data[0];
            var title = data[1];
            $scope.videos.push({
                frame : frame,
                title : title
            });
        }
        init();   // do the push here.
    });

