Как обновить данные таблицы html в angularjs?

Question

У меня есть эта таблица;

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

, который обращается с правильными данными и все при загрузке страницы, но я объявил щелчок слушатель для ФЛОТ диаграммы в контроллере, что я хочу использовать, чтобы изменить данные, представленные в таблице , в зависимости от того, какой штрих/точка на графике нажата;

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

теперь, когда тревога в конце plotclick слушателя, говорит мне, что $scope.tableData определенно обновлен, но данные в HTML таблице остается прежним, обычно в angularjs, путем добавления строки в массив используемый в элементе select, элемент select сразу обновляется с дополнительной опцией, howcome, который не работает, когда я заменяю всю эту таблицу, является объяснением или способом, которым я могу повторно отобразить таблицу после изменения данных?

Answer 1

Угловой не знает о обновлениях модели, которые происходят внутри клика. Используйте $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); 
     } 
    }); 
});