bootstrap-table does not populate inside angular view

Question

Placing bootstrap-table 1 on the main page seems to work, but once it's placed into a view nothing happens.

Here is plunker to reproduce the issue: http://plnkr.co/edit/n0J91B?p=preview. Question: how to modify this plunker to make both tables show the data?

<table data-toggle="table"
   data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/">
<thead>
<tr>
    <th data-field="name">Name</th>
    <th data-field="stargazers_count">Stars</th>
    <th data-field="forks_count">Forks</th>
    <th data-field="description">Description</th>
</tr>
</thead>

In the plunker there shall be two tables, but only the top one shows up, the bottom one only the header shows up: 1 http://bootstrap-table.wenzhixin.net.cn/examples/

Answer 1

Got in contact with component authors and devs: https://github.com/wenzhixin/bootstrap-table/issues/650

This lead to following solution (see details in link above):

// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
    url: '/home',
    templateUrl: 'partial-home.html',
    controller: function($scope) {
      $(function () {
        $('[data-toggle="table"]').bootstrapTable();
      });
    }
})