Wijmo 5 - AngularJS directives

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h1>Simple validation</h1>

    <p>Able to enter alpha numeric in column 1 but not into column 2. Why is this?</p>
    <wj-flex-grid
        initialized="initGrid(s)"
        items-source="data">
        <!-- <wj-flex-grid-column data-type="String" binding="col2"></wj-flex-grid-column> -->
        </wj-flex-grid>

</div>

CSS

.wj-flexgrid {
  height: 150px; 
  margin-top:10px;
 }
 .wj-flexchart {
   height: 300px;
 }

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {
    
    // for musch older version, initialized event may not be available, in that case use other events such as loadedRows to set dataType, you may also define dataType in template if columns are added mannualy
    //<wj-flex-grid-column data-type="String" binding="col2"></wj-flex-grid-column>
    $scope.initGrid = function(s){
    	s.columns.forEach(col => {
    	        col.dataType = wijmo.DataType.String;
    	      });
    }
    
    
    // create some random data
    var col1 = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < col1.length; i++) {
        data.push({
            col1: col1[i],
            col2: Math.round(Math.random() * 20000)
        });
    }

    // expose data as a CollectionView to get events
    $scope.data = new wijmo.collections.CollectionView(data);
});