How can I get a search box to search only one list when there are multiple lists?

Question

I have two lists created from my controller, list A and list B to populate my angular-drag-and-drop lists. I have a search box that searches both lists when I type something. I want my search box to search only list A and not list B.

Models: {
  "selected": null,
  "lists": {
    "A": [
      {
        "label": "Item A1"
      },
      {
        "label": "Item A2"
      },
      {
        "label": "Item A3"
      }
    ],
    "B": [
      {
        "label": "Item B1"
      },
      {
        "label": "Item B2"
      },
      {
        "label": "Item B3"
      }
    ]
  }
}

    <div class="simpleDemo row">
        <input type="text" class="form-control" placeholder="search" ng-model="searchBox">
        <div class="col-md-12">
            <div class="row">
                <div ng-repeat="(listName, list) in models.lists" class="col-md-6">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">{{listName}} code(s)</h3>
                        </div>
                        <div class="panel-body">
                            <ul dnd-list="list">
                                <li ng-repeat="item in list | filter:searchBox"
                                    dnd-draggable="item"
                                    dnd-moved="list.splice($index, 1)"
                                    dnd-effect-allowed="move"
                                    dnd-selected="models.selected = item"
                                    ng-class="{'selected': models.selected === item}">
                                    {{item.label}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div view-source="simple"></div>

        </div>

        <!--<div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Generated Model</h3>
                </div>
                <div class="panel-body">
                    <pre class="code">{{modelAsJson}}</pre>
                </div>
            </div>
        </div>-->

    </div>

Answer 1

I solved my problem using ng-if to show the <li> with the filter only if listName is "A"

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">{{listName}} code(s)</h3>
    </div>
    <div ng-if="listName == 'A'" class="panel-body">
        <ul dnd-list="list">
            <li ng-repeat="item in list | filter:searchBox"
                dnd-draggable="item"
                dnd-moved="list.splice($index, 1)"
                dnd-effect-allowed="move"
                dnd-selected="models.selected = item"
                ng-class="{'selected': models.selected === item}">
                {{item.label}}
            </li>
        </ul>
    </div>
    <div ng-if="listName == 'B'" class="panel-body">
        <ul dnd-list="list">
            <li ng-repeat="item in list"
                dnd-draggable="item"
                dnd-moved="list.splice($index, 1)"
                dnd-effect-allowed="move"
                dnd-selected="models.selected = item"
                ng-class="{'selected': models.selected === item}">
                {{item.label}}
            </li>
        </ul>
    </div>
</div>