angularJs:单击按钮后如何加载表格数据

大家好，如果我的问题太长，我很抱歉，这是我在Stack over flow中的第一个问题：）；我是angularJs的新手，所以我面临这个问题我试图制作一个按钮，将我通过http.get函数检索到的json数据加载到一个带有ng repeat的表中我想在点击按钮后加载数据

角度：

app.controller('dayRecord', function ($scope, $http) {
    var date = dateToString("dailyData")
        ,http;
    $scope.headers = ["company", "ticker", "ccy", "last", "close", "chg", "bid", "ask", "trades", "volume", "turnover"];
    //LoadDate : function to load StockRecords for a given day
    $scope.loadData = function () {
        http = "http://localhost:63342/nasdak/app/data?date=";//the REST service Server to fetch the day stock recrod json data
        http += date; //
        $http.get(http)
            .success(function (response) {
                console.log(response);
                $scope.first = response.balticMainList;
                $scope.columnSort = {sortColumn: 'turnover', reverse: true};
            });
    }
    $scope.loadData();
});

正如你在这里看到的：day记录控制器loadData函数，用于获取json数据

这是我试图加载的表的html代码

HTML

<div ng-controller="dayRecord" style="display: inline;">
        <label for="dailyData">Show Stock For Day :</label>
        <input type="text" id="dailyData" name="dailyData" >
        <button id = "dailyStocksLoad" ng-click="loadData()">load</button>
    </div>
<div class ="dailyViewContainer" ng-controller="dayRecord">
    <div >
        <h1>Baltic Main List</h1>
        <table id ="myTable" >
            <thead>
            <tr >
                <th  ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
                <td style="text-align: left">{{ x.company }}</td>
                <td>{{ x.ticker }}</td>
                <td>{{ x.ccy }}</td>
                <td>{{ x.last }}</td>
                <td>{{ x.close }}</td>
                <td>{{ x.chg }}% </td>
                <td>{{ x.bid }}</td>
                <td>{{ x.ask }}</td>
                <td>{{ x.trades }}</td>
                <td>{{ x.volume }}</td>
                <td>{{ x.turnover }}</td>
            </tr>
            </tbody>
        </table>
    </div>

当我调用控制器内部的函数时，一切正常

 app.controller('dayRecord', function ($scope, $http) {
        ...
        $scope.loadData = function () {
        ...
        }
        
        
        $scope.loadData();
    });

但是当我点击按钮动态加载数据时，我无法加载它，我甚至用console.log（response）检查了响应，它显示http.get正在检索数据，但它没有在表上刷新它