title: AngularJS, UI Bootstrap's Tabs and Datatables
body: <p>I am using <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">UI Bootstrap's</a> Tabs and inserting Datatables in each tab but the datatable is not getting rendered.</p>
  
  <p>If I remove <code>uib-tabset</code> and <code>uib-tab</code> the datatable gets rendered.</p>
  
  <p>Here's the html code</p>
  
  <pre><code>&lt;uib-tabset active="active" &gt;
      &lt;uib-tab index="0" heading="Successful"&gt;
          &lt;div class="panel"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;table id="table-messagestatus-view-successful" class="table table-hover dataTable table-striped width-full"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;MessageID&lt;/th&gt;
                              &lt;th&gt;Date&lt;/th&gt;
                              &lt;th&gt;Message Name&lt;/th&gt;
                              &lt;th&gt;Phone Number&lt;/th&gt;
                              &lt;th&gt;Status&lt;/th&gt;
                              &lt;th&gt;Cost&lt;/th&gt;
                              &lt;th&gt;SMS Group&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tfoot&gt;
                          &lt;tr&gt;
                              &lt;th&gt;MessageID&lt;/th&gt;
                              &lt;th&gt;Date&lt;/th&gt;
                              &lt;th&gt;Message Name&lt;/th&gt;
                              &lt;th&gt;Phone Number&lt;/th&gt;
                              &lt;th&gt;Status&lt;/th&gt;
                              &lt;th&gt;Cost&lt;/th&gt;
                              &lt;th&gt;SMS Group&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/tfoot&gt;
                      &lt;tbody&gt;
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/uib-tab&gt;
      &lt;uib-tab index="1" heading="Unsuccessful"&gt;
           &lt;div class="panel"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;table id="table-messagestatus-view-unsuccessful" class="table table-hover dataTable table-striped width-full"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;MessageID&lt;/th&gt;
                              &lt;th&gt;Date&lt;/th&gt;
                              &lt;th&gt;Message Name&lt;/th&gt;
                              &lt;th&gt;Phone Number&lt;/th&gt;
                              &lt;th&gt;Status&lt;/th&gt;
                              &lt;th&gt;Cost&lt;/th&gt;
                              &lt;th&gt;SMS Group&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tfoot&gt;
                          &lt;tr&gt;
                              &lt;th&gt;MessageID&lt;/th&gt;
                              &lt;th&gt;Date&lt;/th&gt;
                              &lt;th&gt;Message Name&lt;/th&gt;
                              &lt;th&gt;Phone Number&lt;/th&gt;
                              &lt;th&gt;Status&lt;/th&gt;
                              &lt;th&gt;Cost&lt;/th&gt;
                              &lt;th&gt;SMS Group&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/tfoot&gt;
                      &lt;tbody&gt;
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/uib-tab&gt;        
  &lt;/uib-tabset&gt;
  </code></pre>
  
  <p>... and the js</p>
  
  <pre><code>var app = angular.module('smsmanagement', ['ui.bootstrap']);
  
  app.controller('MessageStatusController', function ($scope, $http, $routeParams, $routeParams) {
  
  var messageID = $routeParams.param;
  
  // Refresh the table
  if ($('#table-messagestatus-view-successful').length &gt; 0) {
      $('#table-messagestatus-view-successful').DataTable({
          sDom: "&lt;'row'&lt;'col-sm-6'l&gt;&lt;'col-sm-6'f&gt;r&gt;t&lt;'row'&lt;'col-sm-6'i&gt;&lt;'col-sm-6'p&gt;&gt;",
          "processing": true,
          "serverSide": true,
          "order": [[1, "desc"]],
          "ajax": {
              "url": "messagestatus/dt",
              "data": function (d) {
                  d.messageID = messageID;
                  d.status = "successful";
              }
          }
      });
  }
  });
  </code></pre>
  
  <p>What should I do?</p>