Reset modal that is dynamically created

Question

i'm developing for the first time with Angular JS and i created the following bootstrap modal in which there are 3 div that are dynamically created. One div is created per time, they are mutually exclusive. Here is the code:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4>User Menu</h4>
        </div>
        <div class="row">
            <!-- USER MENU 1 -->
            <div ng-if="ctrl.state.current.name==='userMenu1'" ng-class="ctrl.fileOpen ? 'col-xs-8' : 'col-xs-12'" 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>{{ctrl.getFile($index)}}</td>
                        <td>{{ctrl.getGroup($index)}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- USER MENU 2 DIV -->
        [...]

        <!-- USER MENU 3 DIV -->
        [...]

        <!-- BUTTONS PANEL DIV --->
        [...]

            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Close</button>
            </div>
    </div>
</div>

In every div users can fill text in some inputs and even add new input fields by press on some buttons (i omitted them in the code). I would like that every time users close the modal and open it again, the modal restores to the initial div (menu1, menu2 or menu3, depends on where users open the modal).

How can i do that?

I tried several ways (like this or this) but none does the trick for my case.

Answer 1

I changed your code. You can see my code.

http://jsfiddle.net/deadmask92/8XCps/344/

I added:

function reset(){
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
}

$('body').on('click','#myClose',reset);

$('body').on('click','#CloseIcone',reset);

and i changed:

$('body').on('click','#myReset',reset);