Wijmo 5 - CollectionView Navigators

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20153.102/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20153.102/interop/angular/wijmo.angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.odata.min.js"></script>
<script src="http://demos.componentone.com/wijmo/5/Angular/CustomGridEditors/CustomGridEditors/scripts/directives/CustomGridEditor.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
  <wj-flex-grid items-source="data" allow-add-new="true">
    <wj-flex-grid-column binding="id" width=".4*"></wj-flex-grid-column>
    <wj-flex-grid-column binding="date" width="*" format="d" wj-flex-grid-editor="edtDate"></wj-flex-grid-column>
    <wj-flex-grid-column binding="time" width="*" format="t" wj-flex-grid-editor="edtTime"></wj-flex-grid-column>
    <wj-flex-grid-column binding="country" width="2*" wj-flex-grid-editor="edtCountry"></wj-flex-grid-column>
    <wj-flex-grid-column binding="product" width="2*" wj-flex-grid-editor="edtProduct"></wj-flex-grid-column>
    <wj-flex-grid-column binding="amount" format="n2" width="*" wj-flex-grid-editor="edtNumber"></wj-flex-grid-column>
  </wj-flex-grid>

  <div style="display: none">
    <wj-input-date id="edtDate" format="d"></wj-input-date>
    <wj-input-time id="edtTime" format="t" min="7:00" max="22:00" step="30"></wj-input-time>
    <wj-input-number id="edtNumber" format="n2"...

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);
app.directive('wjFlexGridEditor', function() {
  return {
    restrict: 'A',
    priority: 110, // << required to work within 'wj-flex-grid-column' directives
    link: function(scope, element, attrs) {

      // get grid, editor, and column info
      var eEdt = document.getElementById(attrs['wjFlexGridEditor']);
      var eGrid = element[0].parentElement;
      var att = element[0].attributes['name'];
      if (!att) att = element[0].attributes['binding'];
      wijmo.assert(eEdt && eGrid && att && att.value);

      // get grid and column after they have been instantiated
      setTimeout(function() {

        // get grid and column
        var grid = wijmo.Control.getControl(eGrid);
        wijmo.assert(grid instanceof wijmo.grid.FlexGrid);
        var col = grid.columns.getColumn(att.value);
        wijmo.assert(col instanceof wijmo.grid.Column);

        // associate the custom editor with the column
        var ce = new CustomGridEditor(col, eEdt);
      }, 0);
    }
  };
});
// controller
app.controller('appCtrl', function($scope) {
  // Customers table
  $scope.countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  $scope.products = 'Widget,Gadget,Doohickey'.split(',');
  $scope.data = new wijmo.collections.CollectionView(getData(5));
  $scope.data.newItemCreator = function() {
    var i = $scope.data.totalItemCount + 1,
      countries = $scope.countries,
      products = $scope.products,
      colors = $scope.colors,
      dt = new Date();
    return {
      id: i,
      date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
      time: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
      country: countries[Math.floor(Math.random() * countries.length)],
      product: products[Math.floor(Math.random() * products.length)],
      amount: Math.random() * 10000 - 5000,
      discount: Math.random() / 4
    };
  }
  $scope.data.pageSize =...