JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="x in myarr | unique:'type'" style="list-style-type: none;">
      <li> Type {{x.type}}</li>
      <ul>
        <li ng-repeat="y in myarr | filter:{type:x.type}:true"> 
          {{y.name}}
        </li>   
      </ul>
  </ul>
</div>

JavaScript

angular.module('myApp', ['angular.filter']).controller('myCtrl', function($scope, $filter) {
 $scope.myarr = [
    {id: 1, name: 'foo',type: 1},
    {id: 2,name: 'bar',type: 1},
    {id: 3,name: 'quad',type: 2},
    {id: 4,name: 'cab',type: 2},
    {id: 5,name: 'baz',type: 2},
    {id: 6,name: 'cad',type: 3}
  ];
});