Angularjs: Files upload within a table - angularjs

Question

Our team is developing in ServiceNow and created a table widget that needs the ability to upload files per row. Our code for the file upload consist of the following code:
In our controller, we have the following:
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
We also created a dependency called fileUpload:
var myApp = angular.module('myApp', []);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
};
}]);
Finally, we have an angular provider called fileModel:
function fileModel($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files);
});
});
}
};
}
The issue we're running into is when we contain the following within <td> tags:
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload me</button>
When the above code is out side of the <td> tags, we are able to view the attached files in our console:
Once the <input> is contained within <td>, myFile does not exist in the console. What do we need to do in order for each row of our table to have its own attachments? This is what our table looks like: