AngularJS, UI Bootstrap's Tabs and Datatables

Question

I am using UI Bootstrap's Tabs and inserting Datatables in each tab but the datatable is not getting rendered.

If I remove uib-tabset and uib-tab the datatable gets rendered.

Here's the html code

<uib-tabset active="active" >
    <uib-tab index="0" heading="Successful">
        <div class="panel">
            <div class="panel-body">
                <table id="table-messagestatus-view-successful" class="table table-hover dataTable table-striped width-full">
                    <thead>
                        <tr>
                            <th>MessageID</th>
                            <th>Date</th>
                            <th>Message Name</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Cost</th>
                            <th>SMS Group</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>MessageID</th>
                            <th>Date</th>
                            <th>Message Name</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Cost</th>
                            <th>SMS Group</th>
                        </tr>
                    </tfoot>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </uib-tab>
    <uib-tab index="1" heading="Unsuccessful">
         <div class="panel">
            <div class="panel-body">
                <table id="table-messagestatus-view-unsuccessful" class="table table-hover dataTable table-striped width-full">
                    <thead>
                        <tr>
                            <th>MessageID</th>
                            <th>Date</th>
                            <th>Message Name</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Cost</th>
                            <th>SMS Group</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>MessageID</th>
                            <th>Date</th>
                            <th>Message Name</th>
                            <th>Phone Number</th>
                            <th>Status</th>
                            <th>Cost</th>
                            <th>SMS Group</th>
                        </tr>
                    </tfoot>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </uib-tab>        
</uib-tabset>

... and the js

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 > 0) {
    $('#table-messagestatus-view-successful').DataTable({
        sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
        "processing": true,
        "serverSide": true,
        "order": [[1, "desc"]],
        "ajax": {
            "url": "messagestatus/dt",
            "data": function (d) {
                d.messageID = messageID;
                d.status = "successful";
            }
        }
    });
}
});

What should I do?

Answer 1

Don't use a jQuery solution like the comment above is suggesting. ui-bootstrap doesn't require jQuery, just modify the examples on the doc page to your need. this also means don't use $ in your controller, but rather just a function that will refresh the table. you can populate a table using the ngRepeat directive.

Like so

<table id="table-messagestatus-view-successful" class="table table-hover dataTable table-striped width-full">
          <thead>
            <tr>
              <th>MessageID</th>
              <th>Date</th>
              <th>Message Name</th>
              <th>Phone Number</th>
              <th>Status</th>
              <th>Cost</th>
              <th>SMS Group</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in tableData2">
              <th>{{row.MessageID}}</th>
              <th></th>
              <th></th>
              <th></th>
              <th>{{row.Status}}</th>
              <th></th>
              <th></th>
            </tr>
          </tbody>
        </table>

Now everything is getting rendered

Here is a demo plunker