Angular JS filtering a select / ng-options.

A simple example on how to filter a select and ng-options.

by Annie Lagang

HTML

<div ng-app="selectFilters">
    <div ng-controller="ItemCtrl">
        <div>
            Unisex names: <select ng-model="name" ng-options="item.Name for item in Items"></select>
        </div>
        <div>
            Unisex names containing "B": <select ng-model="Name" ng-options="item.Name for item in Items | filter: {Name: 'B'}"></select>
        </div>
        <div>
            Unisex names with the same value (options will be filtered after you choose one): <select ng-model="item" ng-options="item.Name for item in Items | selectFromSelected:item.Value"></select>
        </div>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<style>

JavaScript

angular.module('selectFilters', ['filters']);
angular.module('filters', [])
.filter('selectFromSelected', function () {
        return function (incItems, value) {
            var out = [{}];
            
            if(value){
                for(x=0; x<incItems.length; x++){
                    if(incItems[x].Value == value)
                        out.push(incItems[x]);
                }
                return out;
            }
            else if(!value){
                return incItems
            }
        };
    });

function ItemCtrl($scope, $filter){
    $scope.Items = [
        {Name: 'Aaron', Value: 1},
        {Name: 'Billy', Value: 1},
        {Name: 'Bobby', Value: 1},
        {Name: 'Drew', Value: 2},
        {Name: 'Jean', Value: 2},
        {Name: 'Kim', Value: 2}
    ];   
    
}