how to update the data of an html table in angularjs?

Question

I have this table;

     <table class="table table-striped table-bordered table-responsive" ng-show="viewBusinessUnits">
      <thead>
        <tr>
          <th>Business Unit</th>
          <th><input type="checkbox" ng-model="businessUnitSales">Sales</input></th>
          <th><input type="checkbox" ng-model="businessUnitPercentageLY">Percentage Last Year</input></th>
          <th><input type="checkbox" ng-model="businessUnitWTD">WTD Percentage Last Year</input></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in tableData">
          <td><a href="#" ng-click="toggleTable(row.name)">{{row.name}}</a></td><!---->
          <td>{{row.Actual}}</td>
          <td>{{row.Budget}}</td>
          <td>{{row.BudgetVar}}</td>
        </tr>
      </tbody>
    <table>

that is drawn with the correct data and everything when the page loads, but I've declared a click listener for a flot chart in the controller, that I want to use to change the data displayed in the table, depending on which bar/point on the graph is clicked;

    $("#graph_canvas").bind("plotclick", function (event, pos, item) {

      if(item){
        switch(item.series.data[item.dataIndex][0]){
          case 'airtime':
            $scope.tableData = $scope.airtimeData;
            break;

          case 'clothing':
            $scope.tableData = $scope.clothing;
            break;

          case 'foods':
            $scope.tableData = $scope.foods;
            break;
        }

        alert("1st item: " + $scope.tableData[0].name);
      }
    });

now that alert at the end of the plotclick listener, tells me that $scope.tableData was definitely updated, but the data shown in the html table remains the same, usually in angularjs, by adding a row to an array used in a select element, the select element is updated immediately with an extra option, howcome it doesn't work when I replace this entire table, is the an explanation or a way I can re-render the table after changing the data?

Answer 1

Angular does not know about the model updates that take place inside click. Use $apply:

$("#graph_canvas").bind("plotclick", function (event, pos, item) {
    $scope.$apply(function(){
        if(item){
            switch(item.series.data[item.dataIndex][0]){
                case 'airtime':
                    $scope.tableData = $scope.airtimeData;
                    break;
                case 'clothing':
                    $scope.tableData = $scope.clothing;
                    break;
                case 'foods':
                    $scope.tableData = $scope.foods;
                    break;
            }
            alert("1st item: " + $scope.tableData[0].name);
        }
    });
});