Long List with Filter
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<div>Selected Items: {{ getSelected() }}</div>
<hr/>
<input ng-model="searchFilter"
type="text" ng-model-options="{debounce: 500}" />
<ul>
<li ng-repeat="value in items | filter: searchFilter">
<label>
<input type="checkbox" ng-model="selectedData[value]" />{{value}}</label>
</li>
</ul>
</div>
</div>
JavaScript
var app = angular.module("myApp", []);
app.controller("myController", ["$scope", function ($scope) {
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.-_+";
$scope.items = [];
for (var i = 0; i < 2000; i++) {
var item = "";
for (var c = 0; c < 10; c++) {
item += possible.charAt(Math.floor(Math.random() * possible.length));
}
item = item + " (" + i + ")";
$scope.items.push(item);
}
$scope.selectedData = {};
$scope.getSelected = function () {
var list = [];
for (var val in $scope.selectedData) {
list.push(val);
}
return list.join(", ");
};
}]);