angularJs : how to load table data after clicking a button?

Question

Hello Everyone im sorry if my question is being so long this is my first question in Stack over flow :) ; i'm new to angularJs so im facing this problem i was trying to make aa button that load json data that i retrieve by http.get function to a table with ng-repeat and i wanted to make the data be loaded after i click a button

Angular:

 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(); }); 

as you see here there is : dayRecord Controller loadData function that gets the json data

and here is the html code for the table im trying to load

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> 

when i call the function inside the controller everything works fine

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

but when i click the button to load the data dynamically i cannot load it i even checked the response with console.log(response) it shows that http.get is retrieving the data but it's not refreshing it on the table

Answer 1

Hmm maybe the issue is that you are assigning 2 pieces of html to the same controller. What about wrapping the whole html into 1 div element and put ng-controller there like below:

<div ng-controller="dayRecord">
  <div 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">

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

Answer 2

Angular might need some help in changing the DOM. Try to add $scope.$apply() to the end of your load data function and see what happens on the console.