Group By data using angularJS Filter

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <script src="script.js"></script>
    <style>
      .container1 {
        width : 45%;
        float : left;
        margin-right : 50px;
      }
      .container2{
        width : 45%;
        float : left;
        
      }
      .table{
        width : 100%;
        border-collapse : collapse;
      }
      .table td, .table th {
        border : 1px solid black;
        padding : 5px;
        margin : 0px;
      }
      .groupHeader{
        padding: 3px;
        margin : 3px;
      }
      .groupValue{
        padding : 2px 20px;
      }
      
    </style>
  </head>

  <body ng-controller="groupByCtrl">
  <div class="container1">
    <h4>Before applying group by filter</h4>
    <table class="table">
      <thead>
        <th>Name</th>
        <th>Country</th>
      </thead>
      <tr ng-repeat="detail in playerDetails track by $index">
        <td>{{detail.name}}</td>
        <td>{{detail.country}}</td>
      </tr>
    </table>
  </div>
  <div class="container2">
    <h4>After applying Group By filter</h4>
    <div ng-repeat="detail in playerDetails | groupBy:'country'">
			<h4 class="groupHeader" ng-show="detail.group_by_key">{{detail.country}}</h4>
			<span class="groupValue">{{detail.name}}</span>	
		</div>
  </div>
  </body>

</html>

var app = angular.module("app",[]);

app.controller("groupByCtrl",["$scope",function($scope){
  console.log("inside df");
  $scope.playerDetails = [{"name":"MS Dhoni","country":"India"},
      {"name":"JE Root","country":"England"},{"name":"GJ Maxwell","country":"Australia"},
      {"name":"V Kohli","country":"India"},{"name":"SP Narine","country":"West Indies"},
      {"name":"KP Pietersen","country":"England"},{"name":"JP Faulkner","country":"Australia"},
      {"name":"B Kumar","country":"India"},{"name":"KA Pollard","country":"West Indies"},
      {"name":"GJ Bailey","country":"Australia"},{"name":"CH Gayle","country":"West Indies"},
      {"name":"JM Anderson","country":"England"},{"name":"RA Jadeja","country":"India"}];
}]);

app.filter("groupBy",["$parse","$filter",function($parse,$filter){
  return function(array,groupByField){
    var result	= [];
            var prev_item = null;
            var groupKey = false;
            var filteredData = $filter('orderBy')(array,groupByField);
            for(var i=0;i<filteredData.length;i++){
              groupKey = false;
              if(prev_item !== null){
                if(prev_item[groupByField] !== filteredData[i][groupByField]){
                  groupKey = true;
                }
              } else {
                groupKey = true;  
              }
              if(groupKey){
                filteredData[i]['group_by_key'] =true;  
              } else {
                filteredData[i]['group_by_key'] =false;  
              }
              result.push(filteredData[i]);
              prev_item = filteredData[i];
            }
            return result;
  }
}])

/* Styles go here */