AngularJS Dynamic Filter Configuration fail to resolve

I'm a newbie to AngularJS with some fair knowledge with KnockoutJS also.

I'm trying to implement a search feature on 'products' in my ViewModel that is configurable by the end user by combining..

• Search by 'name' of product
• Search by 'tags' of product

in combination with search operations

• CONTAINS
• STARTS WITH
• EQUALS

I believe you understood the functionality I am trying to build up.

The following is the ViewModel I'm using.

var InstantSearchController = function ($scope) {
    var self = this;

    $scope.filtersAvailable = [
        {
            displayText: 'Tag',
            filterMethod: 'tagFilter',
            description: 'Filter by Tags'
        },
        {
            displayText: 'Description',
            filterMethod: 'descriptionFilter',
            description: 'Filter by description'
        }
    ];
    $scope.selectedFilter = $scope.filtersAvailable[1];

    $scope.filterBehaviorsAvailable = [
            {
                displayText: 'CONTAINS',
                regexPrefix: '',
                regexPostfix: ''
            },
            {
                displayText: 'STARTS WITH',
                regexPrefix: '^',
                regexPostfix: ''
            },
            {
                displayText: 'EQUALS',
                regexPrefix: '^',
                regexPostfix: '$'
            }
    ];
    $scope.selectedFilterBehavior = $scope.filterBehaviorsAvailable[0];

    $scope.products = [
        {
            name: 'Household Product',
            description: 'Description household',
            tags: ['personal', 'home']
        },
        {
            name: 'Office product',
            description: 'Business equipments',
            tags: ['office', 'operations', 'business']
        },
        {
            name: 'Misc products',
            description: 'Uncategorized items',
            tags: ['noclass']
        }
    ];
}

Now, the following is my filters list.

   var app = angular.module('InstantSearchModule', []);

//FILTERS BEGIN
app.filter('descriptionFilter', function () {
    var filterFunction = function (data, filterBy) {
        if (filterBy == null || filterBy === '')
            return data;

        var filtered = [];
        var regExp = new RegExp(filterBy, 'gi');
        angular.forEach(data, function (item) {
            if (item.description.match(regExp))
                filtered.push(item);
        });

        return filtered;
    };
    return filterFunction;
});

app.filter('tagFilter', function () {
    var tagFilter = function (data, filterBy) {
        if (filterBy == null || filterBy === '')
            return data;

        var filtered = [];
        var regExp = new RegExp('^' + filterBy, 'gi');

        debugger;
        angular.forEach(data, function (item) {
            var isMatching = false;
            angular.forEach(item.tags, function (t) {
                isMatching = isMatching || (t.match(regExp) != null);
            });

            if (isMatching)
                filtered.push(item);
        });

        return filtered;
    };

    return tagFilter;
});
// FILTERS END

I have created a working part to configure search criteria including the 'filterString'(in a textbox), search operand[tags or description](with a select list) and a search mode[starts with / contains / equals](with another select list). Both of the filters are working fine if I specify the filter functions (tagFilter or descriptionFilter) directly in AngularJS directives as follows [JSFiddle Here].

 <div data-ng-repeat="p in products|tagFilter:filterString|orderBy:'description.length'">        
        <h4 style="margin-bottom: 5px">{{$index+1}}.&nbsp;{{p.name}}</h4>
        <div>
            {{p.description}}
            <button data-ng-repeat="t in p.tags|orderBy:'toString()'">{{t}}</button>
        </div>
    </div>

I was expecting the following to work for me as {{selectedFilter.filterMethod}} is rendering the value successfully, but is showing an error. Please see the HTML I tried to use for it.JSFiddle Here

<div data-ng-repeat="p in products|{{selectedFilter.filterMethod}}:filterString|orderBy:'description.length'">        
        <h4 style="margin-bottom: 5px">{{$index+1}}.&nbsp;{{p.name}}</h4>
        <div>
            {{p.description}}
            <button data-ng-repeat="t in p.tags|orderBy:'toString()'">{{t}}</button>
        </div>
    </div>

I have attached the error I'm receiving in Google Chrome developer tools along with the resultant HTML to the subject. Please see below. As you can see in the HTML, the filter method is not resolved and so, its not working for me. Do you guys have an advice what I am doing wrong?