Angular ui-tab not refreshing after hiding

Question

I'm looking to hide tabs and then display them, but I'm facing a refreshing problem. In fact if I select one chart then click on the hide botton to display the grid, it hides the other tabs but it displays always the nvD3 charts instead of the ui-grid. even in the charts tab, if I select tab 2 then I click on the hide button, then show button it will activate the first tab but with the second chart selected not the first one.

<uib-tabset>
<uib-tab heading="Test1" ng-hide=hideCharts>
  <nvd3 options="options" data="data"></nvd3>
</uib-tab>
<uib-tab heading="Test2" ng-hide=hideCharts>
  <nvd3 options="options" data="data1"></nvd3>
</uib-tab>
<uib-tab heading="Test3" ng-hide=hideCharts>
  <nvd3 options="options" data="data2"></nvd3>
</uib-tab>
<uib-tab heading="Test4">
  <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
</uib-tab>
</uib-tabset>

here is a plunker for the example that I'm trying

Answer 1

ng-hide won't remove the tab component, which will cause its state to still be tracked. I fixed that using ng-if instead of ng-id. here is a plunker with the solution

  <uib-tabset>
<uib-tab heading="Test1" ng-if=hideCharts index="1">
  <nvd3 options="options" data="data"></nvd3>
</uib-tab>
<uib-tab heading="Test2" ng-if=hideCharts index="2">
  <nvd3 options="options" data="data1"></nvd3>
</uib-tab>
<uib-tab heading="Test3" ng-if=hideCharts index="3">
  <nvd3 options="options" data="data2"></nvd3>
</uib-tab>
<uib-tab heading="Test4">
  <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
</uib-tab>
</uib-tabset>