Advanced live-search with AngularJS

Advanced live-search with AngularJS

HTML

<div ng-app>
    <div ng-controller="MyController">
        <input type="search" ng-model="search" placeholder="Search...">
        <ul>
            <li ng-repeat="name in names | filter:filterBySearch">
                {{ name }}
            </li>
        </ul>
    </div>
</div>

JavaScript

function escapeRegExp(string){
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function MyController($scope) {
    $scope.names = [
    'Lolita Dipietro',
    'Annice Guernsey',
    'Gerri Rall',
    'Ginette Pinales',
    'Lon Rondon',
    'Jennine Marcos',
    'Roxann Hooser',
    'Brendon Loth',
    'Ilda Bogdan',
    'Jani Fan',
    'Grace Soller',
    'Everette Costantino',
    'Andy Hume',
    'Omar Davie',
    'Jerrica Hillery',
    'Charline Cogar',
    'Melda Diorio',
    'Rita Abbott',
    'Setsuko Minger',
    'Aretha Paige'];
    
    $scope.search = '';
    var regex;
    $scope.$watch('search', function (value) {
        regex = new RegExp('\\b' + escapeRegExp(value), 'i');
    });
    
    $scope.filterBySearch = function(name) {
        if (!$scope.search) return true;
        return regex.test(name);
    };
}