Удалить то, что я добавил на модал

Question

У меня есть модал, который показывает новые данные в зависимости от выбора.Проблема в том, что когда я закрываю модальное окно, оно не очищает старые данные, а просто добавляет к нему.В идеале я не буду очищать модал каждый раз, когда нажимаю кнопку закрытия.Это то, что я пробовал, но это не работает.

    $scope.onCloseModal = function() {
    table = angular.element('#table-services');
    table.remove();
   }

Это цикл, который добавляется к HTML.

    angular.forEach($scope.payment_transaction_services,function(value,index) {
        var tr = angular.element('#table-services').append
        ('<tr>' + 
           '<td>' + value.title + '</td>' +
           '<td>' + value.delivered_by + '</td>' + 
           '<td>' + value.status + '</td>' + 
           '<td>' + value.delivery_date + '</td>' + 
         '</tr>'
        );
    })

И это мой модальный.

    <div id="view-service-status" class="modal fade role="dialog">
<div class="modal-dialog" role="document">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h2 class="modal-title">Service Status</h2>
            </div>
            <div class="modal-body">
                <table class=" table table-bordered" id = "table-services">
                    <tr>
                        <th> <b> Service </b> </th>
                        <th> <b> Delivered By </b> </th>
                        <th> <b> Status </b> </th>
                        <th> <b> Delivered At </b> </th>
                    </tr>                        
                </table>
            </div>
            <div class="modal-footer view-service-status">
                <button type="button" class="btn btn-default"  data-dismiss="modal" ng-click="onClose()" class="close">Close</button>
            </div>
    </div>
 </div>

Answer 1

Это происходит потому, что вы просто удаляете и снова получаете тот же элемент без каких-либо изменений.Попробуйте очистить элемент # table-services перед добавлением новых данных.

Примерно так:

var tr = angular.element('#table-services');
tr.empty();
    angular.forEach($scope.payment_transaction_services,function(value,index) {
    tr.append
    ('<tr>' + 
       '<td>' + value.title + '</td>' +
       '<td>' + value.delivered_by + '</td>' + 
       '<td>' + value.status + '</td>' + 
       '<td>' + value.delivery_date + '</td>' + 
     '</tr>'
    );
})