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

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>&nbsp;</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;
    }
}