how to make angular filters customizable and how to use them in javascript

You can customize color:'blue' with any expression in the format filter:expression, so something like color:myColor would work fine provided a color filter has been defined and myColor exists in the current scope.

In your controller, you can do the same.

$scope.filteredArr = $filter('color')($scope.arr,myColor);

Here is an example based on your jsFiddle example.

Javascript:

angular.module('app', [])
    .filter('eyecolor', function () {
        return function ( people, color ) {
            var arr = [];
            for ( var i = people.length; i--; ) {
                if ( people[i].eyeColor === color ) {
                    arr.push( people[i] );
                }
            }
            return arr;
        }
    })
    .controller('ctrl', function ($scope, $filter) {
        $scope.desiredColor = 'Brown';
        $scope.people = [
            {       
                name: 'Bob',
                eyeColor: 'Brown'
            }, {
                name: 'Katherine',
                eyeColor: 'Yellow'
            }, {
                name: 'Chun',
                eyeColor: 'Black'
            }
        ];
        $scope.peopleFilter = $filter('eyecolor')( $scope.people, $scope.desiredColor );
    });

Html:

<div ng-app="app">
    <div ng-controller="ctrl">Color Desired:
        <input ng-model="desiredColor" /><br/>        
        <div ng-repeat="person in people | eyecolor: desiredColor">
            HTML filter: {{person.name}} has eye color {{person.eyeColor}}</div>
        <div ng-repeat="person in peopleFilter">
            Controller filter: {{ person.name }} has eye color {{ person.eyeColor }}</div>
    </div>
</div>