Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>www.W3docs.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body data-ng-app="MyModule" data-ng-controller="MyController">
<select data-ng-model="filterGender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>

<ul>
<li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>

<h3>{{ usersList.length | number }}/{{ users.length }}</h3>

<script>
angular
.module("MyModule", [])
.controller("MyController", function ($scope) {
$scope.users = [
{ name: "Mike", gender: "male", age: 23 },
{ name: "Jenifer", gender: "female", age: 32 },
{ name: "Tom", gender: "male", age: 14 },
{ name: "Ellen", gender: "female", age: 42 },
{ name: "John", gender: "male", age: 22 },
{ name: "Hayk", gender: "male", age: 18 },
{ name: "Eliana", gender: "female", age: 28 },
];
})
.filter("gender", function () {
return function (users, gender) {
if (!gender) {
return users;