FooTable 3 Basic Example

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

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.0.9/footable.bootstrap.css" />
        
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.0.9/footable.js"></script>
    
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Main as vm">
    <h1>FooTable 3 Example</h1>
    <button type="button" class="btn btn-white" ng-click="vm.debug()">debug()</button>
    <button type="button" class="btn btn-white" ng-click="vm.initFooTable()">initFooTable()</button>
    <button type="button" class="btn btn-white" ng-click="vm.remove()">remove(0)</button>
    <button type="button" class="btn btn-white" ng-click="vm.add()">add()</button>
    <table jql-element="vm.table" class="table table-striped" data-paging="true" data-paging-size="5" data-sorting="true">
      <thead>
        <tr>
          <th data-type="number">#</th>
          <th>Name</th>
          <th data-breakpoints="xs md" data-type="number">Count</th>
        </tr>
      </thead>
      <tbody>
        <!-- [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: vm.table.footable() -->
        <!--<tr ng-repeat="item in vm.data" on-finish-render="vm.table.footable()">-->
        <tr ng-repeat="item in vm.data" on-finish-render="vm.initFooTable()">
          <td>{{$index}}</td>
          <td>{{item.name}}</td>
          <td>{{item.count}}</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

(function() {
  angular.module("app", ["ui.bootstrap"]).controller("Main", function($log, $filter, $scope, $interval) {
    var vm = this;

    function Item(name, count) {
      this.name = name;
      this.count = count;
    }

    vm.data = [
      new Item("foo", 10),
      new Item("bar", 15),
      new Item("knarz", 20),
      new Item("peng", 40),
      new Item("zap", 5),
      new Item("pwnd", 1)
    ];

    vm.debug = function() {
      vm.data = [
        new Item("Hans", 10),
        new Item("Franz", 20),
        new Item("Haus", 25),
        new Item("Maus", 5)
      ];
    };
    
    vm.remove = function() {
      vm.data.splice(0, 1);
      //vm.data = angular.copy(vm.data);
    }
    
    vm.add = function() {
      vm.data.push(new Item("New Item", 4));
      //vm.data = angular.copy(vm.data);
    }
    
    vm.initFooTable = function() {
      $log.info("tablefy");
      $log.info("vm.mytable = " + vm.table);
      vm.table.footable();
    };
    
    $scope.$watch("vm.data", function() {
      $log.info("watch!");
      vm.data = angular.copy(vm.data);
    }, true);

    //$interval(function() { vm.table.footable(); }, 2000);

  }).directive('onFinishRender', function($log, $timeout) {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        if (scope.$last === true) {
          $log.info("onFinishRender");
          scope.$evalAsync(attr.onFinishRender);
        }
      }
    }

  }).directive("jqlElement", function($log, $parse) {
    // http://stackoverflow.com/questions/15881453/angularjs-accessing-dom-elements-inside-directive-template
    // https://www.webcodegeeks.com/javascript/angular-js/magic-parse-service-angularjs/
    return {
      restrict: "A",

      compile: function compile(tElement, tAttrs, transclude) {
        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {
            $log.info("jqlElement");
            $log.info(iElement);
            $parse(iAttrs.jqlElement).assign(scope, iElement);
          }
        };
      }
    }
    
  });
})();

/* Styles go here */