How to clear bootstrap modal content with angular (without using jquery)? - angularjs

Question

i'm developing for the first time with Angular JS and i created the following bootstrap modal in which there is a table with some content and inputs. Here is the code:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>User Menu</h4>
</div>
<div class="modal-body">
<div class="tablecontainer">
<table class="table table-striped table-hover table-condensed">
<colgroup>
<col class="col-md-1">
<col class="col-md-2">
<col class="col-md-2">
<col class="col-md-3">
<col class="col-md-2">
<col class="col-md-2">
</colgroup>
<thead>
<tr>
<th> </th>
<th>Firstname</th>
<th>Lastname</th>
<th>Address</th>
<th>Attachment</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>
<input type="checkbox" value="" ng-model="ctrl.checked[$index]" ng-disabled="ctrl.fileupload!==undefined" ng-change="ctrl.checkBox($index)" />
</td>
<td>{{user.firstname}}</td>
<td>
<select class="form-control" ng-model="user.selectedAddress" ng-change="ctrl.checked[$index] = user.selectedAddress.destAddress" ng-options="o as o.destName for o in user.addresses"></select>
</td>
<td>{{user.selectedAddress.destAddress}}</td>
<td><input type = "text" class="customPart"
ng-model="ctrl.customText[$index]" /></td>
</tr>
</tbody>
</table>
</div>
[...]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Close</button>
</div>
</div>
</div>
What is the angular way of clearing bootstrap modal to reset the user inputs?

Answer 1

You don't reset the UI to have a fresh model, you wan't to do the contrary. You need to reset the model, then your UI will be reset.
You can write a function that will reset your users array. For example:
function reset() {
for(var i = 0; i < users.length; i++) {
users[i].selectedAddress = null;
}
}