Add group header for angular ui grid

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.grouping', 'ui.grid.selection']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  var main = this;
  
  main.gridOptions = {
    treeRowHeaderAlwaysVisible: true,
    headerTemplate: 'header-template.html',
    category: [{name: 'People', visible: true},
    {name: 'Year', visible: true},{name: 'Extra1', visible: true},{name: 'Extra2', visible: true}],
    enableGridMenu: true,
    enableSorting: false,
    multiSelect: true,
    columnDefs: [
      {name: 'gender', category:'People', grouping: { groupPriority: 0 }, width: 100, enableColumnMenu: false},
      {name:'name', category:"People", width: 100, enableColumnMenu: false},
      {name:'title', category:"People", width: 100, enableColumnMenu: false},
      {name:'age', category:'Year', width: 50, enableColumnMenu: false},
      {name:'annee', category:'Year', width: 50, enableColumnMenu: false},
      {name:'No Cat',  width: 50, enableColumnMenu: false},
      {name:'extra1', category:'Extra1', width: 75, enableColumnMenu: false},
      {name:'extra3', category:'Extra1', width: 75, enableColumnMenu: false},
      {name:'extra2', category:'Extra2', width: 75, enableColumnMenu: false}
      ],
    data: [
      { gender: 'Male', name: 'Bob', title: 'CEO', age : '14', annee:'1' },
      { gender: 'Male', name: 'Frank', title: 'Lowly Developer', age: '16', annee:'2' },
      { gender: 'Female', name: 'Catherine', title: 'Developer', age: '27', annee:'2' },
      { gender: 'Female', name: 'Jessica', title: 'Engineer', age: '35', annee:'3' }
    ],
    onRegisterApi: function( gridApi ) {
      main.gridApi = gridApi;
    }
  };
  
}]);

.grid {
  width: 1000px;
  height: 150px;
}

.ui-grid-category {
  text-align: center;border-right: 0px;box-shadow: -1px 1px #d4d4d4
  
  
}

<div role="rowgroup"
     class="ui-grid-header">
    <div class="ui-grid-top-panel">
        <div class="ui-grid-header-viewport">
            <div class="ui-grid-header-canvas">
                <div class="ui-grid-header-cell-wrapper"
                     ng-style="colContainer.headerCellWrapperStyle()">
                    <div role="row"
                         class="ui-grid-header-cell-row">
                        <div class="ui-grid-header-cell ui-grid-clearfix ui-grid-category" ng-repeat="cat in grid.options.category"
                             ng-if="cat.visible && 
                             (colContainer.renderedColumns | filter:{ colDef:{category: cat.name} }).length > 0">
                            {{cat.name}}
                            <div class="ui-grid-header-cell ui-grid-clearfix" 
                                 ng-repeat="col in colContainer.renderedColumns | filter:{ colDef:{category: cat.name} }"
                                 ui-grid-header-cell
                                 col="col"
                                 render-index="$index">
                            </div>
                        </div><!--!cat.visible && -->
                        <div class="ui-grid-header-cell ui-grid-clearfix" ng-if="col.colDef.category === undefined"
                             ng-repeat="col in colContainer.renderedColumns track by col.uid"
                             ui-grid-header-cell
                             col="col"
                             render-index="$index">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl as main">
  <div class="grid" ui-grid-grouping ui-grid-selection ui-grid="main.gridOptions" style="height:300px"></div>
  <br>
</div>
    <script src="app.js"></script>
  </body>
</html>