Информация о данных, добавляемая в таблицу в модальном диалоге

Question

У меня есть приложение AngularJS, которое включает в себя jquery DataTable, который заполняется данными о клиентах из базы данных. Каждая строка таблицы данных имеет столбец, который содержит кнопку «Редактировать» и кнопку «Счет». Кнопка Bill запускает модальное диалоговое окно BootStrap, которое содержит простую таблицу HTML. Проблема, с которой я сталкиваюсь, заключается в том, что информация DataTable с главной страницы добавляется в таблицу HTML в модальном диалоговом окне.

Главная страница Определение таблицы данных

<div class="row">
    <div class="col-md-12">
        <h2>Customers</h2>
        <br><br>
        <table class="table table-hover table-bordered" style="width:100%">
            <thead>
                <tr>
                    <td>Username</td>
                    <td>First Name</td>
                    <td>Last Name</td>
                    <td>Created Date</td>
                    <td>Options</td>  <!-- contains two buttons -->
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

Функция контроллера AngularJS, которая заполняет DataTable

$scope.getCustomers = function() {

    $http.get($scope.server + "allcustomers").success(function(data) { 

        for(var i in data) {

            $customer = $("<tr>" +
                            "<td>" + data[i].username + "</td>" +
                            "<td>" + data[i].firstName + "</td>" +
                            "<td>" + data[i].lastName + "</td>" +
                            "<td>" + data[i].createdDate + "</td>" +  
                            "<td>" +
                             "<div class='btn-toolbar'>" +
                                "<button type='button' class='btn btn-danger' ng-click='billCustomer(\"" + data[i].username + "\")'>Bill</button>" +
                             "</div>" +
                            "</td>" + 
                        "</tr>");

            $compile($customer)($scope);

            $('tbody').append($customer);       
        }   

        $(".table").DataTable().page.len( 10 ).draw(); 
    });

}

Модальный диалог

<!-- Modal -->
<div class="modal fade" id="billCustomer" role="dialog">

    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content" ng-controller="dashboardController">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="billCustomer-title"></h4>
            </div>
            <div class="modal-body row">
                <div class = "col-md-8">
                    <h2>Billing History</h2>
                    <div class="scrollable">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <td>Date</td>
                                    <td>Amount</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2018-03-15</td>
                                    <td>$40.00</td>
                                </tr>
                            </tbody>                
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>            
    </div>
</div>

Может ли кто-нибудь помочь мне понять, почему данные из моей таблицы данных, включая кнопки, добавляются к моей таблице в диалоговом окне "Модальные"? Спасибо.