Edit in JSFiddle

agGrid.initialiseAgGridWithAngular1(angular);

var myApp = angular.module('myApp', ['agGrid']);

myApp.controller('gridCtrl', function($scope, $timeout) {
  console.clear();
  //console.log(agGrid.defaultGroupComparator);

  $scope.filter = '';
  var columnDefs = [{
      headerName: "Profile name",
      cellRenderer: 'group',
      colId: 'profileName',
      field: 'group',
      comparator: agGrid.defaultGroupComparator,
       getQuickFilterText: function(params) {
        return params.value ? params.value.name : ""
    }
    }, {
      headerName: "Client name",
      field: "clientName",
      colId: 'clientName'
    }, {
      headerName: "Modification date",
      field: "modDate",
      width: 140,
      colId: 'modDate',
      comparator: agGrid.dateComparator,
      hide: true,
      suppressFilter: true
    }, {
      headerName: 'Reports',
      field: 'reports',
      width: 100,
      suppressSorting: true,
      colId: 'reports',
      suppressFilter: true,
      cellRenderer: function(params) { // Function cell renderer
        return '<span>PDF</span>';
      }
    },

    {
      headerName: 'Status',
      field: 'status',
      width: 100,
      colId: 'status',
      suppressFilter: true
    }, {
      headerName: 'Progress',
      colId: 'progress',
      groupId: 'progress',
      children: [{
        headerName: 'C received',
        field: 'fundsReceived',
        width: 150,
        suppressSorting: true,
        hide: false,
        suppressFilter: true,
        cellRenderer: function(params) {
          return '<span>T</span>'
        }
      }, {
        headerName: 'B received',
        field: 'cafReceived',
        width: 150,
        suppressSorting: true,
        hide: false,
        suppressFilter: true,
        cellRenderer: function(params) {
          return '<b>blah</b>';
        }
      }]
    }
  ];

  $scope.rowData = [{
    group: "Best company ever",
    clientName: "John and jane smith p1",
    modDate: '09/10/2016',
    fundsReceived: true,
    cafReceived: false,
    status: 'submitted',
    participants: [{
      clientName: "jane smith p4",
      modDate: '09/10/2011',
      fundsReceived: true,
      cafReceived: false,
      status: 'cancelled'
    }, {
      clientName: "John smith p2",
      modDate: '01/06/2014',
      fundsReceived: true,
      cafReceived: false,
      status: 'in progress'
    }, {
      clientName: "John and jane smith p3",
      modDate: '07/12/2015',
      fundsReceived: false,
      cafReceived: false,
      status: 'submitted'
    }]
  }, {
    group: "rick & sharon blah",
    clientName: "rick & sharon blah p1",
    modDate: '11/10/2011',
    fundsReceived: false,
    cafReceived: false,
    status: 'in progress',
    participants: [{
      clientName: "rick & sharon blah p4",
      modDate: '08/11/2000',
      fundsReceived: true,
      cafReceived: true,
      status: 'in progress'
    }, {
      clientName: "rick blah p2",
      modDate: '06/12/2014',
      fundsReceived: true,
      cafReceived: false,
      status: 'cancelled'
    }, {
      clientName: "rick & sharon asdgasg p3",
      modDate: '07/14/2013',
      fundsReceived: true,
      cafReceived: false,
      status: 'active'
    }]
  }, {
    group: "my computer industries",
    clientName: "Mark and spencer p1",
    modDate: '01/10/2013',
    fundsReceived: false,
    cafReceived: false,
    status: 'active',
    participants: [{
      clientName: "mark and spencer 3 2324 p4",
      modDate: '09/10/2011',
      fundsReceived: true,
      cafReceived: false,
      status: 'cancelled'
    }, {
      clientName: "mark and spencer dafs p2",
      modDate: '01/23/2010',
      fundsReceived: false,
      cafReceived: false,
      status: 'in progress'
    }, {
      clientName: "mark and spencer p3",
      modDate: '12/12/2015',
      fundsReceived: true,
      cafReceived: false,
      status: 'archived'
    }]
  }, {
    group: "Wan and Shannon Ross",
    clientName: "Wan and shannon p1",
    modDate: '12/10/2010',
    fundsReceived: true,
    cafReceived: true,
    status: 'active',
    participants: [{
      clientName: "Wan and Shannon Ross p4",
      modDate: '15/10/2015',
      fundsReceived: true,
      cafReceived: true,
      status: 'archived'
    }, {
      clientName: "Wan and Shannon Ross p2",
      modDate: '01/23/2013',
      fundsReceived: true,
      cafReceived: false,
      status: 'in progress'
    }, {
      clientName: "Wan and Shannon Ross p3",
      modDate: '09/12/2014',
      fundsReceived: false,
      cafReceived: false,
      status: 'submitted'
    }]
  }];


  $scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: $scope.rowData,
    rowSelection: 'multiple',
    debug: true,
    enableSorting: true,
    groupSelectsChildren: true,
    groupHeaders: true,
    enableFilter: true,
    getNodeChildDetails: getNodeChildDetails,
    sortingOrder: ['desc', 'asc']
  };


  function dateComparator(date1, date2) {
    var date1Number = monthToComparableNumber(date1);
    var date2Number = monthToComparableNumber(date2);

    if (date1Number === null && date2Number === null) {
      return 0;
    }
    if (date1Number === null) {
      return -1;
    }
    if (date2Number === null) {
      return 1;
    }

    return date1Number - date2Number;
  }

  // eg 29/08/2004 gets converted to 20040829
  function monthToComparableNumber(date) {
    if (date === undefined || date === null || date.length !== 10) {
      return null;
    }

    var yearNumber = date.substring(6, 10);
    var dayNumber = date.substring(3, 5);
    var monthNumber = date.substring(0, 2);

    var result = (yearNumber * 10000) + (monthNumber * 100) + dayNumber;
    return result;
  }

function getNodeChildDetails(rowItem) {
            if (rowItem.group) {
                return {
                    group: true,

                    // provide ag-Grid with the children of this group
                    children: rowItem.participants,
                    // this is not used, however it is available to the cellRenderers,
                    // if you provide a custom cellRenderer, you might use it. it's more
                    // relavent if you are doing multi levels of groupings, not just one
                    // as in this example.
                    field: 'group',
                    // the key is used by the default group cellRenderer
                    key: rowItem.group
                };
            } else {
                return null;
            }
        }


  $scope.filterData = function() {
    console.clear();
    console.info('filter data!!!' + $scope.filter);
    console.log($scope.filter);

    $scope.gridOptions.api.setQuickFilter($scope.filter);
  };
});

<div ng-app="myApp" class="container-fluid" style="height: 100vh;">
  <div ng-controller="gridCtrl" class="row" style="height: 100%;">

    <input placeholder="Filter..." type="text" ng-model="filter" ng-keydown="filterData()" ng-keyup="filterData()" ng-change="filterData()" />


    <div style="height: 300px">
      <div ag-grid="gridOptions" class="ag-fresh" style="width: 100%; height: 100%;"></div>

      <div id="display-toolbar" ng-if="displayToolbar">
        <input type="button" ng-click="showCheckboxes()" value="View Columns" />

        <div ng-repeat="item in columnDefs" ng-if="displayCheckbox && $index > 0">
          <label class="checkbox" for="{{item.colId}}">

            <input id="{{item.colId}}" type="checkbox" name="columnName_{{item.colId}}" ng-checked="(item.hide === false || item.hide === undefined) " ng-click="showColumn(item.colId);" ng-model="colSelection.colIds[item.colId]"> {{item.headerName}}
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

.page-wrapper {
  height: calc(100vh - 20px);
  width: calc(100vw - 10px);
}

.wrapper {
  height: 100%;
  width: 100%;
}

.wrap-height {
  height: 100%;
}

.ag-material {
  height: calc(100% - 110px);
  margin-bottom: 10px;
}