# Added Input File through JQuery, didn’t submit any data in Angular Controller

First of all, sorry for bad english. I have some problems with Angular 1 and JQuery. Now here’s the thing. In the view, there is a button that adds up a file-type input box. Here is the code in Pug.

input.form-control(type="file", ng-file-select="", name="photos[0]", ng-model="photos[0]",  accept="image/*")
.col-md-1
| <i class="fa fa-plus"></i>

The button, which is the #add-photos will add a file-type input in the #upload-photos div. I have a code in Angular Controller that adds a file input using JQuery:

$scope.photo_numbers = 1;$scope.photos = [];
$scope.team.photos = []; /* Add Photo */$('#add-photos').click(function() {
$('#upload-photos').append($('<input/>')
.attr('name', 'photos['+$scope.photo_numbers+']') .attr('ng-model', 'photos['+$scope.photo_numbers+']')
$scope.photo_numbers += 1; }); It added the file-type input without any problems. The problem is when I submitted the data. If I added 2 more file input (that makes it 3 with the existing file input), only the first file input data that submitted to the form. Using console.log($scope.photos);, I was expecting that there is $scope.photos[0],$scope.photos1, and $scope.photos2. But the console, was only displaying only the [0]. I thought that maybe I type the ng-model wrong, so I checked the sources. It appears that the ng-model is not wrong. So that’s it. Why did the$scope.photos1 and \$scope.photos2 didn’t appear in the console.log?