angularjs с jquery кнопкой поиска данных не работает

Question

Когда я пытаюсь использовать jquery datatable с angularjs, кнопка поиска не работает.но если я связываю данные, используя чистый asp.net mvc методом actionresult, он работает правильно.

Я связываю данные из user-role.js и использую ng-repeat для их связывания.

моя версия angularjs 1.7.2 jquery.datatble версия 1.10.16

cshtml коды ниже.

        <script type="text/javascript" src="~/Scripts/app/user-role.js"></script>

    <div ng-app="userRoleGridApp" ng-controller="userRoleGridCtrl">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="table-responsive">
                        <table class="table" id="user-table">
                            <thead>
                                <tr>
                                    <th>UserId</th>
                                    <th>User Name</th>
                                    <th>Name Surname</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="x in Users track by $index">
                                    <th>{{x.UserId}}</th>
                                    <th>{{x.UserName}}</th>
                                    <th>{{x.NameSurname}}</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('#user-table').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    //'csvHtml5',
                    'pdfHtml5'
                ]
            });
        });
    </script>

Js сторона

    var app = angular.module("userRoleGridApp",
    ['ngAnimate',
        'ngRoute']);


var baseUrl = location.origin;
app.controller("userRoleGridCtrl", function ($scope, $http) {
    $scope.Users = {};

    initUser();
    function initUser() {
        $http({
            method: "get",
            url: baseUrl + "/UserRole/GetUsers"
        }).then(function (response) {
            $scope.Users = response.data;
        }, function () {
            alert("Error Occur");
        });
    }
});