GroupBy filter is not working in angularJs

I have created a table in angularjs. Now I am trying to group the table rows based on a column value whose title is "source".

For that, I am using groupBy filter. It is not giving any error. But it is displaying empty rows now. Can someone tell me where I am going wrong?

Below is my code:

 <table>
    <thead>
        <tr>
           <th>Metric</th>
           <th>Source</th>
           <th class="value">Value</th>
           <th></th>
        </tr>
        </thead>
        <tr ng-repeat="metric in metrics | filter:query | orderBy:orderProp | groupBy:'info.source'>
            <td class="metric">{{metric.name}}</td>
            <td class="source">{{metric.info.source}}</td>
            <td class="value">{{metric.info.value}}</td>
       </tr>
    </table>

I am pasting a sample of my Json data to get you an idea about my table data:

[{
  "name": "kafka.health",
  "info": {
    "source": "kafka",
    "value": "OK",
    "timestamp": "1459438855068",
    "causes": ""
  }
},
{
  "name": "kafka.bringo.health",
  "info": {
    "source": "kafka",
    "value": "Error",
    "timestamp": "1459438855068",
    "causes": ""
  }
}]

Solution

I myself found the solution of my problem. Correct way to use "groupBy" filter in table is as below:

var app = angular.module("myApp", ['angular.filter']);
app.controller("SimpleController", function($scope) {
  $scope.metrics =  [{
  "name": "kafka.health",
  "info": {
    "source": "kafka",
    "value": "OK",
    "timestamp": "1459438855068",
    "causes": ""
  }
},
{
  "name": "kafka.bringo.health",
  "info": {
    "source": "kafka",
    "value": "Error",
    "timestamp": "1459438855068",
    "causes": ""
  }
},
{
  "name": "dm.bingo.health",
  "info": {
	"source": "deployment-manager",
	"value": "Error",
	"timestamp": "1459438855068",
	"causes": ""
  }
},
{
  "name": "dm.different.health",
  "info": {
	"source": "deployment-manager",
	"value": "Warn",
	"timestamp": "84834883483",
	"causes": ""
  }
},
{
  "name": "kadmfka.bringo.health",
  "info": {
	"source": "deployment-manager",
	"value": "Error",
	"timestamp": "1459438855068",
	"causes": ""
}
}];
});

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>
    <style>
	table{
	width: 100%;
	border: 1px solid black;
	border-collapse: collapse;
	}
	table>thead>tr>th, table>tbody>tr>td{
	border: 1px solid black;
	}
</style>

</head>    
<body ng-app="myApp">
        <div>
            <div data-ng-controller="SimpleController">      
             <table>
		<thead>
			<tr>
			   <th>Metric</th>
			   <th>Source</th>
			   <th class="value">Value</th>
			   <th></th>
			</tr>
		</thead>
		<tbody>
		<tr ng-repeat="metric in metrics | groupBy:'info.source' ">
				<td class="metric">
					<table>
					<tr ng-repeat="item in metric">
					<td>{{item.name}}</td>
					</tr>
					</table>
				</td>
				<td class="source">{{metric[0].info.source}}</td>
				<td class="value">
				<table>
					<tr ng-repeat="item in metric">
					<td>{{item.info.value}}</td>
					</tr>
			   </table>
			   </td>
		</tr>
		</tbody>
    </table>
            </div>
        </div>
            </div>
        </div>
    </body>

    </html>