use the filter defined in html, in my angular controller

Question

I am using a text box in which user can enter any text. based on that the items in the list shown below are filtered as soon as text is typed/erased...

select all(send everyone there) removes the items from mainlist and adds those elements to selected list...

works fine for all. i want that only the filtered ones should be moved from one list to another...(on select all, all items are transferred!)

can i pass the same text(entered by user) and use that as a filter on my list inside the angular controller??

if yes, then guide me how.

below is the code segment :

$scope.transferList = function ( x ) {
		if ( x === "selectAllServers" ) {
			for ( i = 0; i < $scope.lists.serversList.servers.length; i++ ) {
				$scope.lists.selectedServersList.servers.push(   $scope.lists.serversList.servers[ i ] );
			}
			$scope.lists.serversList.servers = [];
          }
  };

<div class="text-center">
		<h3>Select Servers</h3>
	</div>
	<div class="container col-md-4 col-md-offset-1">
		<form>
		   <div class="form-group">
      			<div class="input-group style='width: 100%'">
        			<div class="input-group-addon"><i class="glyphicon glyphicon-filter"></i></div>
        			<input type="text" class="form-control" placeholder="Enter text to filter servers..." ng-model="searchTerm">
      			</div>      
    		</div>
		</form>
	</div>
	<div class="row">
		<div class="box col-md-4 col-md-offset-1">
			<ul dnd-list="lists.serversList.servers"
				dnd-allowed-types="lists.serversList.allowedTypes">
				<li class="text-center">Servers Available</li>
				<li ng-repeat="server in lists.serversList.servers|filter:searchTerm"
					dnd-draggable="server" dnd-type="server.type"
					dnd-disable-if="server.type == 'unknown'"
					dnd-moved="lists.serversList.servers.splice($index, 1)"
					dnd-effect-allowed="move" class="background-unselected"
					class="searchable">
					<div class="handle">
						<i class="glyphicon glyphicon-chevron-right"
							ng-click="selectItem('server',$index)"></i>
					</div>
					<div class="name">{{server.name}}</div>
				</li>
				<li class="dndPlaceholder">Drop <strong>server</strong> here
				</li>
			</ul>
		</div>
		<div class="box col-md-4 col-md-offset-2">
			<ul dnd-list="lists.selectedServersList.servers"
				dnd-allowed-types="lists.selectedServersList.allowedTypes">
				<li class="text-center">Servers Selected</li>
				<li ng-repeat="server in lists.selectedServersList.servers"
					dnd-draggable="server" dnd-type="server.type"
					dnd-disable-if="server.type == 'unknown'"
					dnd-moved="lists.selectedServersList.servers.splice($index, 1)"
					dnd-effect-allowed="move" class="background-selected">
					<div class="handle">
						<i class="glyphicon glyphicon-chevron-left"
							ng-click="removeItem('server',$index)"></i>
					</div>
					<div class="name">{{server.name}}</div>
				</li>
				<li class="dndPlaceholder">Drop <strong>server</strong> here
				</li>
			</ul>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col-md-4 col-md-offset-1">
			<button class="btn btn-default btn-block"
				ng-click="transferList('selectAllServers')">
				Send Everyone there <i class="glyphicon glyphicon-arrow-right"></i>
			</button>
		</div>
		<div class="col-md-4 col-md-offset-2">
			<button class="btn btn-default btn-block"
				ng-click="transferList('unSelectAllServers')">
				<i class="glyphicon glyphicon-arrow-left"></i> Send Everyone there
			</button>
		</div>
	</div>

hope the code is readable enough.

Answer 1

1.You can launch same filter:

$scope.add = function() {
    var filtered = $filter('filter')($scope.lists.serversList.servers, $scope.searchTerm);
    // actual add here
}

2.As you see there is some code duplication here - you use same filter twice, so you can rewrite a bit:

<input type="text" class="form-control" placeholder="Enter text to filter servers..." ng-model="searchTerm" ng-change="recalculateFiltered()">
<li ng-repeat="server in filteredList" ...

And in controller:

$scope.recalculateFiltered = function() {
        $scope.filteredList = $filter('filter')($scope.lists.serversList.servers, $scope.searchTerm);
}