Take the 2-minute tour ×

I'm trying to build up an object for a filtered search. The user can add multiple filters to the search and can add the same filter more than once with a different value.

The user is presented with a button to add filters. Each one added shows a select populated from a list of available filters.

At the moment, when I add two of the same filter (i.e. two 'Filter A'), they both share the same underlying value. How can I use Angular to break the link from the initial array of filters when the filter is selected in the select box?

JSFiddle Here


<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <button data-ng-click="addFilter()">Add Filter</button>
    <div data-ng-repeat="c in current.filters">
        <div class="select-box">
            <select data-ng-model="c.filter" data-ng-options="filter.name for filter in filters"></select>
            <input type="text" placeholder="Filter value" data-ng-model="c.filter.value">                
    <pre>{{current | json}}</pre>



app.controller('MyCtrl', function($scope) {
    $scope.current = {"filters":[]};
    $scope.filters = [
        {"id":"1", "name":"Filter A", "value":""},
        {"id":"2", "name":"Filter B", "value":""},
        {"id":"3", "name":"Filter C", "value":""},
        {"id":"4", "name":"Filter D", "value":""}

    $scope.addFilter = function() {
share|improve this question

1 Answer 1

up vote 1 down vote accepted

I think that AngularJS doesn't handle the select ng-model directives as you expect it to. In this case it binds to a selected filter object from the filters array. That's why, when you change the value of a filter with the same name all filters with that name see the change, since the underlying object is the same.

What you have to do here is bind the filter value by itself and not as a part of the filter object.

Change this line



<input type="text" placeholder="Filter value" data-ng-model="c.value">  

You also don't need to define the "value" field for every filter anymore.

Updated code: http://jsfiddle.net/HyRUV/5/

share|improve this answer
Perfect - I knew I was missing something simple. Thanks! –  jwest Jul 16 '13 at 8:58
@jwest: I made a value naming mistake let me edit the code above –  Ma3x Jul 16 '13 at 9:08
@jwest: See the updated code. Now it should do exactly what you wanted. Also the field names are the same as in your original code now. The filters are bound to the underlying filter object and the value is bound separately. –  Ma3x Jul 16 '13 at 9:14
Thanks - I got it to work just fine in my actual code, it was just the adding of the dynamic ID my brain was missing. –  jwest Jul 16 '13 at 11:49

Your Answer


