Repeat html code onpush of button in angular - angularjs

Question

I have a simple ng-click button at the moment that adds rows with the row and number.
What im wanting is to add a new segment of code which is this:
<div class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file)">Upload Attachment</div>
<p style="display:inline-block;" ng-if="filenameinv">Uploaded file</p>
<button type="button" ng-click="deleteAtt(file)" class="btn btn-danger btn-sm">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" ng-click="addAtt()" class="btn btn-info btn-sm">
<i class="fa fa-plus"></i>
</button>
Heres what i have in my controller
$scope.rows = ['Row 1', 'Row 2'];
$scope.counter = 3;
$scope.addAtt = function() {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
};
I'm wanting to adapt the controller code to make it work with copying the code above up to 5 items. And ideally on each new item the plus button from the previous would disappear so there would always only be one button.
Basically at the moment there is one upload button. With a delete and plus button that appears when a file is uploaded. What i'm wanting is when a user wants to upload another file said user can click the plus button and another uploader will appear. I also need to get this saving against the db but thats another headache!
Heres the uploader
$scope.uploadinv = function (file) {
if (file) {
Upload.upload({
url: '',
data: {file: file}
}).then(function (resp) {
sweetAlert({title: "Attachment Saved", type: "success"});
}, function (resp) {
sweetAlert({title: "Attachment Not Saved", type: "error"});
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
$scope.event.filenameinv = evt.config.data.file.name
});
}
};
This is the bit i've done so far
$scope.fileUploadRows = [];
var fileDetails = {
fileName: $scope.event.filenameinv
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter = 1;
$scope.addInvAttachment = function() {
var fileDetails = {
fileName: $scope.event.filenameinv
}
$scope.fileUploadRows.push(fileDetails);
$scope.counter++;
}

Answer 1

May be this could help:
<div class="row" ng-repeat="row in rows track by $index">
<div class="btn btn-info btn-sm" style="display:inline-block" ngf-select="uploadinv($file)">Upload Attachment</div>
<p style="display:inline-block;" ng-if="fileUploadRows[$index].filename">Uploaded file</p>
<button type="button" ng-click="deleteAtt(file)" class="btn btn-danger btn-sm">
<i class="fa fa-trash-o"></i>
</button>
<button type="button" ng-if="$last" ng-click="addAtt()" class="btn btn-info btn-sm">
<i class="fa fa-plus"></i>
</button>
</div>
Please note that you probably should handle (array of) filenameinv somehow. You didn't show in your code how you use/intialize this variable.
EDIT: See updated markup above. The trick is to have the appropriate $index. I think you should also call addInvAttachment() function, probably in the sucess then of the upload.