使用angular-datatables正确地将隐藏表切换为可见表？

Question

我有2个表，一个显示，另一个隐藏：

<div ng-show="displayed('active')" ng-controller="DataTablesCtrlA as datatables">
  <table datatable="" dt-columns="datatables.dtColumns" dt-options="datatables.dtOptions" class="display"></table>
</div>

<div ng-show="displayed('retired')" ng-controller="DataTablesCtrlB as datatables">
  <table datatable="" dt-columns="datatables.dtColumns" dt-options="datatables.dtOptions" class="display"></table>
</div>

我有一个控制表格可见性的切换，当点击按钮A时，表格A显示，表格B隐藏，反之亦然。

我面临的问题是，当显示表B时，表头未正确展开。这在DataTables文档here上已知并得到了很好的解释。

问题截图下方：

所以我这样使用columns.adjust()：

在视图模板中：

<div  class="btn-group">
  <button ng-click="setDisplayed('active')"
                        ng-class="{active: displayed('active')}" class="btn btn-default">Active</button>
  <button id="btn-retired" ng-click="setDisplayed('retired')"
                        ng-class="{active: displayed('retired')}" class="btn btn-default">Retired</button>
</div>

在视图控制器中：

//...
this.setDisplayed = function(toDisplay){
    this.displayed = toDisplay;
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust().draw();
  };
//...

我面临的问题是，当setDisplayed被调用且标题保持＆＃34;未展开＆＃34;时，表B仍然隐藏。

有没有一种干净的方法来解决这个问题？

我想到的一个解决方案是监听表display样式属性的更改，并在事件处理程序中调用colums.adjust()。但这需要更改指令链接属性。