Angular bsTable Integration

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" />
  
  <!-- Dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  <!-- bootstrap-table -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/locale/bootstrap-table-en-US.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/extensions/angular/bootstrap-table-angular.min.js"></script>

  <script src="script.js"></script>
</head>

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

</body>

</html>

// Code goes here
//http://wenzhixin.net.cn/p/bootstrap-table/docs/getting-started.html
angular.module('app', ['bsTable'])
.controller('MainController', function ($scope) {

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

        var rows = makeRandomRows();

        $scope.bsTableControl = {
            options: {
                data: rows,
                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'
                }]
            }
        };

});