title: AngularJS Filter: Filter the objects with unique ID into separate Object
body: <p>I am developing angular app, there i am having the data objects with key and value see below</p>
  
  <pre><code>var data=[{key:"home",value:"hk1"},{key:"home",value:"hk2"},{key:"home",value:"hk3"},{key:"home",value:"hk4"},
                              {key:"product",value:"pk1"},{key:"product",value:"pk2"},{key:"product",value:"pk3"},{key:"product",value:"pk4"},
                              {key:"service",value:"sk1"},{key:"service",value:"sk2"},{key:"service",value:"sk3"},{key:"service",value:"sk4"},
                              ];
  </code></pre>
  
  <p>My Page is </p>
  
  <pre><code>&lt;html lang="en" ng-app="myApp"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Angular Boiler Plate&lt;/title&gt;
          &lt;script src="/angular.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          var app=angular.module('myApp',[]);
          function mainCtrl($scope){
              $scope.Maindata=[{key:"home",value:"hk1"},{key:"home",value:"hk2"},{key:"home",value:"hk3"},{key:"home",value:"hk4"},
                              {key:"product",value:"pk1"},{key:"product",value:"hk2"},{key:"product",value:"hk3"},{key:"product",value:"hk4"},
                              {key:"service",value:"sk1"},{key:"service",value:"hk2"},{key:"service",value:"hk3"},{key:"service",value:"hk4"},
                              ];
  
  
          }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body ng-controller="mainCtrl"&gt;
  
          &lt;h2 ng-repeat="data in Maindata" class=""&gt;
              {{data.key}}
              &lt;div ng-repeat=""&gt;{{data.value}}&lt;/div&gt;
          &lt;/h2&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to separate the objects with same key into one separate object like</p>
  
  <pre><code>var filtereddata=[{"home":"[{value:"hk1"},{value:"hk2"},{value:"hk3"},{value:"hk4"}]"},
                    {"product":"[{value:"pk1"},{value:"pk2"},{value:"pk3"},{value:"pk4"}]"},
                    {"service":"[{value:"sk1"},{value:"sk2"},{value:"sk3"},{value:"sk4"}]"},
                   ]
  </code></pre>
  
  <p>So that i can use "home", 'service" and "product" as headers one time in a page and iterate those values present in each header into list using ng-repeat.</p>
  
  <p>Here i am going to use two  <code>ng-repeat</code> one for headers i.e home, service and product. Another to iterate data in each header.</p>
  
  <p>Please help me achieve this using filter. Thanks in advance for any help.</p>