Wijmo 5 - Multi-column Filter

HTML

<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.51/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.51/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>Multi-column Filter</h1>

    <p>Filter:
        <input ng-model="filter">
    </p>
   <wj-flex-grid control="flex" items-source="data" selection-mode="Row">
        <wj-flex-grid-column header="States" binding="code" ></wj-flex-grid-column>
        <wj-flex-grid-column header="City" binding="city"></wj-flex-grid-column>
           <wj-flex-grid-column header="Population" binding="pop" data-map="stateMap"></wj-flex-grid-column>
    </wj-flex-grid>
</div>

JavaScript

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

// controller
app.controller('appCtrl', function ($scope) {

    // refresh collectionView when filter changes
    $scope.$watch('filter', function () {
        $scope.data.refresh();
    });

    function applyFilter(item) {
        if (!$scope.filter) return true;
        var filter = $scope.filter.toLowerCase();
        for (var k in item) {
            if ($scope.flex.columns.getColumn(k) != undefined && $scope.flex.columns.getColumn(k).isVisible) {

                var val = $scope.flex.columns.getColumn(k).dataMap == undefined ? item[k] : $scope.flex.columns.getColumn(k).dataMap.getDisplayValue(item[k]);

                if (wijmo.isString(val)) {
                    if (val.toLowerCase().indexOf(filter) >= 0) {
                        return true;
                    }
                }
            }
        }
        return false;
    }
    var properties = [{
        code: 'WA',
        isSelected: false,
        isState: false,
        city: 'Seattle',
        pop: 652
    }, {
        code: 'OR',
        isSelected: false,
        isState: false,
        city: 'Portland',
        pop: 609
    }, {
        code: 'CA',
        isSelected: false,
        isState: false,
        city: 'Los Angeles',
        pop: 3884
    }];


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

    // create some random data
    var state = [{
        name: 'Pennsylvania',
        pop: 652
    }, {
        name: 'New York',
        pop: 609
    }, {
        name: 'NJ',
        pop: 3884
    }];

    $scope.stateMap = new wijmo.grid.DataMap(state, "pop", "name");
});