Angular bind-once with ng-table

Experiment with using bind-once with ng-table pagination, etc

by Sajeetharan Sinnathurai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/v0.6.0/dist/ng-table.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v0.6.0/dist/ng-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div ng-controller="demoController">
    <h2>Using bind-once with ng-table</h2>
    <form class="form-inline">
        <div class="form-group">
            <label>Row:</label>
            <input class="form-control" type="number" ng-model="editIndex" placeholder="Select Row Index" />
        </div>
        <div class="form-group">
            <input class="form-control" type="text" ng-model="allData[editIndex].installationAt" placeholder="installationAt" />
        </div>
    </form>
    <hr/>
    <table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-striped">
        <tr ng-repeat="row in $data track by row.id">
            <td ng-repeat="col in $columns">{{::row[col.field]}}</td>
        </tr>
    </table>
</div>

JavaScript

var app = angular.module('myApp', ['ngTable']);

(function () {

    app.controller("demoController", demoController);

    demoController.$inject = ["$scope", "$filter", "$q", "NgTableParams", "demoDataGenerator"];

    function demoController($scope, $filter, $q, NgTableParams, demoDataGenerator) {
        var data = demoDataGenerator.generateData(100);
        $scope.allData = data;
        $scope.cols = demoDataGenerator.generateColumns(data[0]);
        this.editIndex = 0;

        $scope.tableParams = new NgTableParams({
            page: 1, // show first page
            count: 10 // count per page
        }, {
            filterDelay: 0,
            counts: [5, 10, 20, 50],
            total: data.length, // length of data
            getData: function ($defer, params) {
                // use built-in angular filter
                debugger;
                var filteredData = !_.isEmpty(params.filter()) ? $filter('filter')(data, params.filter()) : data;
                var orderedData = !_.isEmpty(params.sorting()) ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;

                $scope.editIndex = (params.page() - 1) * params.count();
                params.total(orderedData.length);
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });
    }
})();

(function () {

    app.service("demoDataGenerator", demoDataGenerator);

    function demoDataGenerator() {

        var template = {
            "installationAt": "Philadelphia, PA",
                "adminEmail": "[email protected]",
                "poweredBy": "Cofax",
                "poweredByIcon": "/images/cofax.gif"
        };

        this.generateData = generateData;
        this.generateColumns = generateColumns;

        function generateData(number) {
            return _.range(number).map(function (n) {
                var clone = _.mapValues(template, function(val){
                   ...