Edit in JSFiddle

angular.module('app', []).controller('myController', function($scope) {
    
    $scope.friends = [
        {name:'John', age:25, gender:'boy'},
        {name:'Jessie', age:30, gender:'girl'},
        {name:'Johanna', age:28, gender:'girl'},
        {name:'Joy', age:15, gender:'girl'},
        {name:'Mary', age:28, gender:'girl'},
        {name:'Peter', age:95, gender:'boy'},
        {name:'Sebastian', age:50, gender:'boy'},
        {name:'Erika', age:27, gender:'girl'},
        {name:'Patrick', age:40, gender:'boy'},
        {name:'Samantha', age:60, gender:'girl'}
  ];
    
    $scope.genderSelector = [
        {name:'男子', value:'boy'},
        {name:'女子', value:'girl'}
    ];
    
    $scope.ageSelector = [
        {num:25, value:25},
        {num:30, value:30}
    ];
    
    $scope.search = {};
    
    $scope.$watch('gender', function(value) {
    });
    
    $scope.$watch('age', function(value) {
    });
});

<div ng-app="app">
    <div ng-controller="myController">
        <select ng-model="search.gender" ng-options ="gender.value as gender.name for gender in genderSelector">
            <option value="">ALL</option>
        </select>
        <select  ng-model="search.age" ng-options ="age.value as age.num for age in ageSelector">
            <option value="">ALL</option>
        </select>
        <ul>
            <li ng-repeat="data in friends | filter:search" >{{data.name}}</li>
        </ul>
    </div>
</div>

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<style>