Why isn't ng-repeat removing my file input types and how can I get this to work correctly? - angularjs

Question

I have the following div to allow a user to upload multiple file inputs:
<div class="form-inline" ng-repeat="file in selectedFiles track by $index">
<input class="form-control" style="width:350px;" type="text" name="description{{$index}}" ng-model="file.fileDescription" ng-disabled="isDisabled" />
<input class="form-control" style="width:350px;" type="file" name="file_file{{$index}}" ng-model="file.file" accept="application/pdf" ng-disabled="isDisabled" />
<button ng-if="$last" class="btn btn-link" ng-click="addFile();" ng-disabled="isDisabled"><i class="glyphicon glyphicon-plus-sign text-success large-font"></i></button>
<button class="btn btn-link" ng-click="removeFile($index);" ng-disabled="isDisabled"><i class="glyphicon glyphicon-remove text-danger large-font"></i></button>
</div>
And I have the following in my scope:
scope.selectedFiles = [];
scope.addFile = function() {
scope.selectedFiles.push({});
};
scope.removeFile = function(index) {
if(index >= 0) {
scope.selectedFiles.splice(index, 1);
}
};
If I press the addFile button, it adds rows just fine. If I press the removeFile button, a line is removed, however, the file inputs still remain the same.
For example, if I press the addFile button 3 times and put in 3 files. It has all 3 lines as it should. If I then press the removeFile button on the first or second line, the second line is correct on the left, but the 3rd file input was removed, not either of the first two.
How can I get this to remove lines as I would expect it to?

Answer 1

I'm not sure of why it behave weird on you. It works just fine on this fiddle I made so please double check :)
I intentionally removed the track by and added examples to the code to show that it removes the one you clicked:
$scope.selectedFiles = [
{file:'File1', fileDescription: 'First file'},
{file: 'File2', fileDescription: 'Second file'},
{file: 'File3', fileDescription: 'Third file'}
];
$scope.addFile = function() {
$scope.selectedFiles.push({});
};
$scope.removeFile = function(index) {
if(index >= 0) {
$scope.selectedFiles.splice(index, 1);
}
};

Answer 2

Maybe try:
delete scope.selectedFiles[index];