BootstrapTable AngularJS extension with data loaded async not working

I am using BootstrapTable AangularJS extension from here

And this plnkr shows example on using with extension. But the example uses static data generated before table is rendered. But I am trying to make it work with data that is loaded dynamically (assume ajax request). But this is not working. The data is not rendered.

Plnkr example with data loaded async

angular.module('app', ['bsTable'])
    .controller('MainController', function ($scope, $timeout) {

function makeRandomRows () {
    var rows = [];
    for (var i = 0; i < 500; i++) {
        rows.push(
          {
            index: i,
            id: 'row ' + i,
            name: 'GOOG' + i,
            flagImage: '4'
        }
        );
    }
    return rows;
}

$timeout(function(){
    console.log("timedout");
      $scope.bsTableControl.data  = makeRandomRows({ workspace: "test"});
}, 2000);

    var rows = makeRandomRows();

    $scope.bsTableControl = {
        options: {
            data: [],
            rowStyle: function (row, index) {
                return { classes: 'none' };
            },
            cache: false,
            height: 400,
            striped: true,
            pagination: true,
            pageSize: 10,
            pageList: [5, 10, 25, 50, 100, 200],
            search: true,
            showColumns: true,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: false,
            showToggle: true,
            maintainSelected: true,
            columns: [{
                field: 'state',
                checkbox: true
            }, {
                field: 'index',
                title: '#',
                align: 'right',
                valign: 'bottom',
                sortable: true
            }, {
                field: 'id',
                title: 'Item ID',
                align: 'center',
                valign: 'bottom',
                sortable: true
            }, {
                field: 'name',
                title: 'Item Name',
                align: 'center',
                valign: 'middle',
                sortable: true
            }, {
                field: 'flag',
                title: 'Flag',
                align: 'center',
                valign: 'middle'
            }]
        }
    };

 });

<body ng-controller="MainController">
  <h1>Angular bsTable</h1>
  <div>
    <table bs-table-control="bsTableControl"></table>
  </div>

</body>

Thanks for any help.

Solution

I figured out the solution. I just need to do bsTable initialization code once data is loaded instead of initializing before.

Updated plnkr

$timeout(function(){
        console.log("timedout");


            $scope.bsTableControl = {
            options: {
                data: makeRandomRows({ workspace: "test"}),
                rowStyle: function (row, index) {
                    return { classes: 'none' };
                },
                cache: false,
                height: 400,
                striped: true,
                pagination: true,
                pageSize: 10,
                pageList: [5, 10, 25, 50, 100, 200],
                search: true,
                showColumns: true,
                showRefresh: false,
                minimumCountColumns: 2,
                clickToSelect: false,
                showToggle: true,
                maintainSelected: true,
                columns: [{
                    field: 'state',
                    checkbox: true
                }, {
                    field: 'index',
                    title: '#',
                    align: 'right',
                    valign: 'bottom',
                    sortable: true
                }, {
                    field: 'id',
                    title: 'Item ID',
                    align: 'center',
                    valign: 'bottom',
                    sortable: true
                }, {
                    field: 'name',
                    title: 'Item Name',
                    align: 'center',
                    valign: 'middle',
                    sortable: true
                }, {
                    field: 'flag',
                    title: 'Flag',
                    align: 'center',
                    valign: 'middle'
                }]
            }
        };


    }, 2000);