$Scope не привязывается при первой загрузке

---

я новичок в AngularJS. мне нужно показать некоторые детали в modalpopup, нажав на кнопку в строке таблицы.
Моя таблица кодов :-

<table>
      <tbody>
        <tr ng-repeat="data in DataList |filter : Search">
         <td>{{data.OrderNo}}</td>
              <td>
                <a href="#myModal" class="edit_button" data-toggle="modal" ng-click="ShowDetail(data)">SELECT</a>
                    </td>
                </tr>
            </tbody>
        </table>

у меня есть таблица в modalpopup также чтобы показать детали:-

<div class="modal fade" id="myModal" role="dialog">
<table class="table table-bordered table-striped">
                            <tbody  ng-repeat="data in OrderList">
                                <tr >
                                    <td style="width: 20%">
                                        OrderNumber :-
                                    </td>
                                    <td style="width: 30%">
                                         {{data.OrderNumber}}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 20%">
                                        Order Date:-
                                    </td>
                                    <td style="width: 30%">
                                        {{data.Orderdate}}
                                    </td>
                                  
                                </tr>
</tbody>
</table>
</div>

мой JS код выглядит так :-

var app = angular.module('MyApp', []);
app.controller('MyController', function ($http, $scope) {

    $http.get('/Customer/Customerdata').then(function (response) {
        $scope.DataList = JSON.parse(response.data);
    })


    $scope.ShowDetail = function (x) {
        alert(x.OrderNo);
        $.ajax({
            url: '/Order/OrderDetails',
            type: 'GET',
            dataType: 'JSON',
            data: {"OrderNo": x.OrderNo},
            contentType: 'application/json',
            success: function (response) {
                $scope.OrderList = JSON.parse(response);
            }
        });
    }
});

Когда я в первый раз нажимаю на кнопку ВЫБРАТЬ

$scope.OrderList

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

Что я уже пробовал:

я ищу в google, но не получаю никакого решения, которое работает для меня..

---