$Scope not bind at first time load

<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>

<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>

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