Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to group data with Angular filter ?

  • Last Updated : 29 Jul, 2020

The task is to show how to group-data with an Angular-filter.

Steps involved:

1. You can install angular-filter using these four different methods:

  • Via Bower: by running $ bower install angular-filter from your terminal

  • Via npm: by running $ npm install angular-filter from your terminal.

Installing via npm 

  • Via cdnjs: add the following script-src to your application.

2. Include angular-filter.js (or angular-filter.min.js) in your index.html, after including Angular itself as shown in the below example.

3. Add ‘angular.filter’ to your main module’s list of dependencies.

Example: In this example, we will group dogs by their breeds using angular-filter.


<!DOCTYPE html>
    <script src=
    <script src=
    <link rel="stylesheet" href=
    <meta charset="utf-8">
<body ng-app="myApp" ng-controller="myCtrl">
    <p class="w3-jumbo w3-text-green pad" 
        align="center" style="margin: 0 0 0 0">
    <p class="w3-large w3-text-green pad" 
        A computer science portal for geeks
        <li ng-repeat=
            "(key, value) in dogs | groupBy:'breed'">
            Breed: {{ key }}
                <li ng-repeat="dog in value">
                    Dog name: {{ }}
    <script type="text/javascript">
        angular.module('myApp', ['angular.filter'])
            .controller('myCtrl', function ($scope) {
            $scope.dogs = [
                { name: 'Alex', breed: 'German Shepherd' },
                { name: 'Rocky', breed: 'Bulldog' },
                { name: 'John', breed: 'Beagle' },
                { name: 'Paula', breed: 'Bulldog' },
                { name: 'Bobby', breed: 'German Shepherd' }


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!