AngularJS Filters Example with Salesforce Page (Bootstrap style)

Example Visualforce Page

<apex:page controller="ContactListView" sidebar="false" >
    
     <style>
         tr.dataRow {
           background-color:white;
         }
         tr.dataRow:hover {
           background-color: #e3f3ff;
         };
     </style>
     
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    
    <apex:pageBlock >
    
        <div ng-app="ContactListViewApp" ng-controller="ContactListViewController">
            <div class="row">
                <div class="form-group col-md-2">
                    <label> Search: </label>
                    <input type="text" ng-model="keyWord.$" placeholder="Enter keyword" />
                </div>
                <div class="form-group col-md-2">
                    <label> Contact Search: </label>
                    <input type="text" ng-model="keyWord.Name" placeholder="Enter Contact name" />
                </div>
                <div class="form-group col-md-2">
                    <label> Account Search: </label>
                    <input type="text" ng-model="keyWord.Account.Name" placeholder="Enter Account name" />
                </div>
                <div class="form-group col-md-2">
                    <label> Phone Search: </label>
                    <input type="text" ng-model="keyWord.Phone" placeholder="Enter Contact pnone"/>
                </div>
            </div>
            <div  style="height: 600px;overflow: auto;" class="table-responsive">
            
                <table cellpadding="0px" cellspacing="0px" class="table table-striped table-hover">
                    <tr>
                        <th> Name </th>
                        <th> Account </th>
                        <th> Phone </th>
                    </tr>
                    <tr ng-repeat="con in conListJSON | filter:keyWord">
                        <td>
                            {{ con.Name }}
                        </td>
                        <td>
                            {{ con.Account.Name }}
                        </td>
                        <td>
                            {{ con.Phone }}
                        </td>
                    </tr>
                </table>
            </div>
            <script>
                angular.module('ContactListViewApp', []).controller('ContactListViewController', function($scope){
                    
                    $scope.conListJSON = JSON.parse('{!conListJSON}');
                    console.log($scope.conListJSON);
                    console.log(JSON.stringify('{!conListJSON}'));
                });           
            </script>        
        </div>
    </apex:pageBlock>
</apex:page>

Example Controller

public class ContactListView {
    
    public List<Contact> conList{get;set;}
    public String conListJSON{get;set;}
    public ContactListView(){
    
        conList = [SELECT Id, Name, AccountId, Account.Name, Phone FROM Contact WHERE AccountId != NULL];      
        conListJSON = JSON.serialize(conList);  
        conListJSON = String.escapeSingleQuotes(conListJSON);
    }
}