Wijmo 5 [Flex Grid]

Set different style for columnheader

HTML

<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" ng-controller="appCtrl">
        <div style="height:100px;background:green">
          other contents.
        </div>
        <wj-flex-grid control="flex" items-source="data" item-formatter="itemFormatter" initialized="init(s,e)" >
        </wj-flex-grid>      
    </div>

JavaScript

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

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

            // create some random data
            var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                data = [];
            for (var i = 0; i < countries.length; i++) {
                data.push({
                    country: countries[i],
                    downloads: Math.round(Math.random() * 20000),
                    sales: Math.random() * 10000,
                    expenses: Math.random() * 5000
                });
            }
          
            $scope.init= function (s, e) {                
                setTimeout(function () {
                    getGridCell(s, 0, 0, '#9E9D24');
                    getGridCell(s, 0, 1, '#03A9F4');
                    getGridCell(s, 0, 3, '#00796B');
                    getGridCell(s, 1, 1, '#388E3C');
                    getGridCell(s, 1, 2, '#388E3C');
                    getGridCell(s, 1, 3, '#607D8B');
                }, 10);
           };
            // expose data as a CollectionView to get events
            $scope.data = new wijmo.collections.CollectionView(data);            
            function getGridCell(grid, r, c,color) {
                // find the cell from its bounding rectangle
                var rc = grid.getCellBoundingRect(r, c,true);
                var cell = document.elementFromPoint(rc.left + rc.width / 2, rc.top + rc.height / 2);
                console.log(cell);
                // make sure this is a header
                if (wijmo.hasClass(cell, 'wj-header')) {
                    $(cell).css('backgroundColor',color);
                }
            }            
            $scope.$watch('flex', function () {
                var flex = $scope.flex;
                if (flex) {
                    
                    // add some header rows
                   ...