Angularjs ngFileUpload adding new file overwrites last one - angularjs

Question

So I am trying my luck with ng-file-upload. I have it set to upload multiple files, but each time I click the "upload file" button or "Drag and drop" the files (I have both options on the page), it seems to overwrite my previous files with the new ones I chose. Can someone help me fix up the code to allow for me to click the button twice to add to the same list?
Fiddle: http://jsfiddle.net/ptf5z9e5/2/
controller:
$scope.files = []
$scope.uploadFiles = function (files) {
$scope.files = files;
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.$error) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
files: file
}
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}
}
};
HTML:
<div class="modal-content">
<div class="modal-header">
<span id="span" class="close" style="z-index: 99999;">×</span>
<!-- <div class="circle close" ></div> -->
<p id="uploadText">Upload Files</p>
<hr class="add-horizontal-line">
</div>
<div class="modal-body">
<ul>
<li ng-repeat="f in files" style="font:smaller" class="file-list"><p id="filesetup"></p>
<!-- file image -->
<div ng-if="vm.checkJPGFile(f.name) == 'jpg'">
<img src="app/assets/img/jepfimg.png" style="width: 28px; height: 33px; position: relative; left: 20px;" alt="" />
</div>
<div ng-if="vm.checkPNGFile(f.name) == 'png'">
<img src="app/assets/img/pngimg.png" style="width: 28px; height: 33px; position: relative; left: 20px;" alt="" />
</div>
<div ng-if="vm.checkPDFFile(f.name) == 'png'">
<img src="app/assets/img/pdfimg.png" style="width: 28px; height: 33px; position: relative; left: 20px;" alt="" />
</div>
<!-- filename -->
<div class="loadershow">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
<!-- loading message and progress bar -->
<br>
<span class="progress" ng-show="progress >= 0">
<div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
</span>
<p style="margin-left: 2px;font-style: italics;font-family: 'Roboto', sans-serif; font-size: 12px;color: #818A8F;" ng-bind="'(' + progress + '%' + ' ' + 'complete)'"></p>
<!-- end of loading animation -->
<!-- <div class="input-field col s6 m6 l6">
<input placeholder="Note" id="first_name" type="text" class="validate active square-box">
<label for="first_name" class="active">Description</label>
</div> -->
</li>
<li ng-repeat="f in errFiles" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
</ul>
<div ngf-drop ngf-select ng-model="files" class="drop-box"
ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
accept="image/*,application/pdf" ngf-select="uploadFiles($files)"
ngf-pattern="'image/*,application/pdf'"><img src="app/assets/img/cloud-computing.png" id="cloud" alt="" />Drag and drop files here to upload</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
<div id="moveStuff">
<p class="clickup">
-or click here to upload-
</p>
<div class="buttn" ngf-select="uploadFiles($files)" multiple accept="image/*">upload file</div>
</div>
</div>
</div>