Uib-tab is not rendering anything

Question

UIb-tab is not displaying anything.Simple "tabs" were working great but a scenario came where they failed and so I had to switched to uib-tabs.Below is my code and the versions I used in my project.

<div class="ui-tab-container">
  <uib-tabset active="currentTabIndex">
    <uib-tab heading="Region Wise" index="0" classes="my-tab" style="border: 1px solid #e9e9e9;">
      <br>
      <br>
      <table class="table table-hover table-striped table-bordered" ng-hide="mydata.length==1" ng-if="mydata.length>1">
        <thead style="background:lightskyblue;color:#ffffff">
          <!--<th>SL No</th>-->
          <th>Region</th>


          <th>RE Count</th>

          <th ng-repeat="sale in mydata[0].cat_wise_sale | orderBy:'cat'">{{sale.cat}}</th>
          <th>Total</th>

          <th>Target</th>
          <th>Achievement</th>
        </thead>
        <tbody>
          <tr ng-repeat="ant in mydata | filter:textToSearch">
            <!--<td>{{$index+1}}</td>-->
            <td ng-if="ant.region!='Total'"><a href ng-click="region_selected(ant.region)">{{ant.region}}</a>
            </td>
            <td ng-if="ant.region=='Total'">{{ant.region}}</td>
            <td>{{ant.total_re}}</td>

            <td ng-repeat="sale in ant.cat_wise_sale | orderBy:'cat'">{{sale.sale}}</td>
            <td>{{ant.total_sale}}</td>

            <td>{{ant.target_qty}}</td>
            <td>{{ant.achievement}}</td>

          </tr>

        </tbody>
      </table>
    </uib-tab>
    <uib-tab heading="Branch Wise" index="1" classes="my-tab" style="border: 1px solid #e9e9e9;" active="state_tab">

    </uib-tab>
    <uib-tab heading="City Wise" index="2" style="border: 1px solid #e9e9e9;" classes="my-tab" active="city_tab">

    </uib-tab>
    <uib-tab heading="Counter Wise" index="3" style="border: 1px solid #e9e9e9;" classes="my-tab" active="counter_tab">

    </uib-tab>
  </uib-tabset>
  <loading-data class="" ng-show="loading"></loading-data>
  <br>
  <br>
  <br>
</div>

Installed versions "angular": "~1.5.6"

"angular-bootstrap": "~2.3.1"

"angular-ui-bootstrap": "2.3.1"

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

Answer 1

1. Have you installed angular-ui

2. use ng-if in tabs to render them

3. Also, since ~ angular 1.5, the tags uib-tabset, uib-tab, uib-tab-heading should be used

here is reference code for u to check everything u installed:-

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>



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