<!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" ng-change="onGenderChange()">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<ul>
<li data-ng-repeat="user in usersList" data-ng-bind="user.name"></li>
</ul>
<h3>{{ usersList.length | number }}/{{ users.length }}</h3>
<script>
angular
.module("MyModule", [])
.controller("MyController", function ($scope, $filter) {
$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 },
];
$scope.usersList = angular.copy($scope.users);
$scope.onGenderChange = function () {
$scope.usersList = $filter("gender")($scope.users, $scope.filterGender);