Object Array in AngularJS - angularjs

Question

I am newbie to AngularJS. I want array of objects name, selected and count like this at run-time :
$scope.filenames = [
{ name: 'abc', selected: false , count: 10},
{ name: 'ede', selected: false, count: 5},
{ name: 'xyz', selected: false, count: 2 },
{ name: 'pqe', selected: false, count: 8 }
];
So I have created restangular service that fetch the values of name, count and selected on runtime. The code to get runtime those values are :
//initialize the arrays
$scope.filenames=[];
$scope.filenames.count=[];
$scope.filenames.name=[];
$scope.filenames.selected=[];
//called rest service that fetch the names of all files
Restangular.one("getAllFiles").get().then(function(listAllFiles){
for(i=0;i<listAllFiles.length;i++){
var fileName=listAllFiles[i];
//then called another rest service that return the file name along with the count like abc=2
var parameter="getFileCount/fileName;
Restangular.one(parameter).get().then(function(countAndFileName){
var spilitFileCount=countAndFileName.split("myspiliter");
$scope.filenames.name.push(spilitFileCount[0]);
$scope.filenames.selected.push(false);
$scope.filenames.count.push(spilitFileCount[1]);
});
}
});
I am able to get count and file names successfully. I want all them to put in $scope.filenames array. So that I can use this array on my html page :
Html Code to display file name along with count is :
<div class="form-group" id="filename" style="display:none;">
<label class="col-sm-8 control-label" ng-repeat="filename in filenames">
<input
type="checkbox"
name="myName[]"
value="{{filenames.name}}"
ng-model="filenames.selected"
ng-click="toggleSelection(filename.name)"
> {{filename.name}} ({{filename.count}})
</label>
</div>
But I am unable to put the values into array $scope.filenames and use it at HTML view. If I am accessing the values of $scope.filenames outside of the outer rest service, then it has nothing at all. Where I am missing the things ?

Answer 1

Your code doesn't match at all with what you want. What you want is:
$scope.filenames = [
{ name: 'abc', selected: false, count: 10},
{ name: 'ede', selected: false, count: 5},
{ name: 'xyz', selected: false, count: 2},
{ name: 'pqe', selected: false, count: 8}
];
This is a single array, containing objects.
But your code does the following:
$scope.filenames = [];
$scope.filenames.count=[];
$scope.filenames.name=[];
$scope.filenames.selected=[];
This creates 4 arrays.
What you want is
$scope.filenames = [];
And you want to push objects with 3 properties in this array:
var spilitFileCount = countAndFileName.split("myspiliter");
var object = {
name: spilitFileCount[0],
selected: false,
count: spilitFileCount[1]
};
$scope.filenames.push(object);
Your ng-repeat body is wrong as well:
<label class="col-sm-8 control-label" ng-repeat="filename in filenames">
The above means: iterate over the array filenames; at each iteration, the current element is accessible using the variable filename.
So it should not be
value="{{filenames.name}}"
ng-model="filenames.selected"
but
value="{{filename.name}}"
ng-model="filename.selected"