Question

In the following Angularjs snippet, an entire table is shown by default and gets filtered down as you start typing.

1. What would be best practice to change it to show no results by default and only start showing results after, say, at least 3 results match the search query?

2. Bonus question, how would you go about only displaying results if a minimum of 2 characters have been entered?

Html:

<div ng-app="myApp">
    <div ng-controller="PeopleCtrl">
        <input type="text" ng-model="search.$">
        <table>
            <tr ng-repeat="person in population.sample | filter:search">
                <td>{{person.name}}</td>
                <td>{{person.job}}</td>
            </tr>
        </table>
    </div>
</div>

Main.js:

var myApp = angular.module('myApp', []);
myApp.factory('Population', function () {
    var Population = {};
    Population.sample = [
        {
            name: "Bob",
            job: "Truck driver"
        }
        // etc.
    ];
    return Population;
});

function PeopleCtrl($scope, Population) {
    $scope.people = Population;
}

Answer 1

You can do all of that in your markup, actually… here’s a plunk to demonstrate

And here’s the change in your markup:

<input type="text" ng-model="search">
<table ng-show="(filteredData = (population.sample | filter:search)) && filteredData.length >= 3 && search && search.length >= 2">
    <tr ng-repeat="person in filteredData">
        <td>{{person.name}}</td>
        <td>{{person.job}}</td>
    </tr>
</table>

EDIT: changed my answer to reflect your requests.