How to implement second level grouping using angular-filter library?

Question

#Permission Category: Code
  Permission: Add Role: Developer
  Permission: Edit Role: Developer
  Permission: Delete Role: Developer
  Permission: Delete Role: Project Lead
#Permission Category: Project
  Permission: Add Role: Admin
  Permission: Edit Role: Project Manager
  Permission: Delete Role: Project Manager
  Permission: Delete Role: Product Owner
#Permission Category: Testing
  Permission: Add Role: Tester
  Permission: Edit Role: Tester
  Permission: Edit Role: Test Lead
  Permission: Delete Role: Test Lead

In the JSON structure above I have duplicate listings from my REST source.. for ex:

  Permission: Delete Role: Developer
  Permission: Delete Role: Project Lead

  Permission: Edit Role: Tester
  Permission: Edit Role: Test Lead

Instead I would like this to be displayed in UI as:

  Permission: Delete Role: Developer
                     Role: Project Lead

  Permission: Edit Role: Tester
                   Role: Test Lead

How should I achieve this with Angular-Filter?

Please find JSBin URL here: http://jsbin.com/helanefegu/1/edit?html,js,output

I would like to achieve something similar to here: https://coyotecrk.files.wordpress.com/2011/10/blog2-jira-3.png

Answer 1

Hope this helps:

  Permission Category: {{ key }}
  <li ng-repeat="(name, roles) in value | groupBy: 'name'">
        Permission: {{ name }}
    Role: <span ng-repeat="role in roles" ng-bind="role.role"></span>
  </li>