<!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)
};