Wijmo 5 [Flex Grid]

Custom group Header for each group row

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="myApp">
        <div ng-controller="appCtrl">            
            <wj-flex-grid items-source="data" item-formatter="itemFormatter">                
            </wj-flex-grid>
        </div>
    </div>

CSS

b {
            color: blue;
            text-shadow: 0 0 2px red;
            margin:0 10px;
        }

JavaScript

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

        // controller
        app.controller('appCtrl', function ($scope) {
           
            var countries = 'US,Germany,Netherlands'/*,UK,Japan,Italy,Greece,Belgium,Iceland,Philippines'*/.split(','),
                          salesareas = 'East,West,North,South'.split(','),
                          data = [];
            for (var i = 0; i < countries.length; i++) {
                for (var j = 0; j < salesareas.length; j++) {
                    data.push({
                        country: countries[i],
                        salesarea: salesareas[j],
                        downloads: Math.round(Math.random() * 20000),
                        sales: Math.random() * 10000,
                        expenses: Math.random() * 5000
                    });
                };
            }
            $scope.data = new wijmo.collections.CollectionView(data);
            var collectionView = $scope.data;
            var groupDescr = new wijmo.collections.PropertyGroupDescription("country");
            collectionView.groupDescriptions.push(groupDescr);
            $scope.itemFormatter = function (panel, r, c, cell) {
                if (panel.rows[r] instanceof wijmo.grid.GroupRow && panel.cellType != wijmo.grid.CellType.RowHeader) {
                    var span = '<span class="wj-elem-collapse wj-glyph-down-right"></span>',// html for expand/collapse group
                        flex = panel.grid,
                        value = flex.rows[r].dataItem.name,// get group header name
                        count = flex.rows[r].dataItem.items.length; // get items in group

                    if (flex.rows[r].isCollapsed)
                        span = '<span class="wj-elem-collapse wj-glyph-right"></span>';

                  /*  if (flex.rows[r].dataItem.name == 'US') { */
                        cell.innerHTML =span+' <i>Country</i> <b>'+value.substring(0,1)+'</b>...