Basic Search Page using Angular JS

This post explains using of Visualforce Remote Objects with Angular JS.

Salesforce explanation on Visualforce Remote Objects:

"JavaScript remoting is a popular, powerful, and efficient method for building Web apps with Visualforce, especially for creating pages for use in Salesforce1 or working with JavaScript libraries such as jQuery or AngularJS. Visualforce Remote Objects are proxy objects that enable basic DML operations on sObjects directly from JavaScript. Remote Objects remove some of the complexity from JavaScript remoting by reducing the need for @RemoteAction methods in an Apex controller or extension.

Behind the scenes, the Remote Objects controller handles sharing rules, field level security, and other data accessibility concerns. Pages that use Remote Objects are subject to all the standard Visualforce limits, but like JavaScript remoting, Remote Objects calls don’t count toward API request limits. Using Visualforce Remote Objects consists of implementing two separate pieces of functionality on the same page.

Access definitions, written in Visualforce with the Remote Objects components. These components generate a set of JavaScript proxy objects that you can use in step 2.

Data access functions, written in JavaScript. These functions use the proxy objects that are made available by the access definitions to perform create, retrieve, update, and delete operations on your data.

Your page then uses the data access functions to respond to user interaction, such as form submissions or controls changes, or to perform periodic actions in response to timers, or most anything that you can write in JavaScript."

Please read Visualforce Remote Objects article for more details.

Visualforce Page : AngularMVC

<apex:page >
<script src="{!URLFOR($Resource.angulardemo,'jssrc/angular.min.js')}"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="{!URLFOR($Resource.angulardemo,'app/app.js')}"></script>
<div ng-app="myAngularMVC">
    <apex:remoteObjects >
        <apex:remoteObjectModel name="Contact" jsShorthand="contact" fields="Id,Name">
            <apex:remoteObjectField name="Phone" jsShorthand="phone"/>
        </apex:remoteObjectModel>
    </apex:remoteObjects>    
    <div ng-controller="myAngularMVCController">
        <input type="text" name="txtSearch" class="form-control" placeholder="Enter Name to search" ng-model="contactName"/>           
        <button type="button" class="btn btn-default" ng-click="fetch(contactName)">Search</button>
        <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Phone</th>             
            </tr>
        </thead>
        <tfoot>
        </tfoot>
        <tbody>
            <tr ng-repeat="contact in contactList">
                <td>
                    {{contact.id}}
                </td>
                <td>
                    {{contact.Name}}
                </td>
                <td>
                    {{contact.Phone}}
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</div>   
</apex:page>

app.js

var myapp = angular.module("myAngularMVC",[]);
myapp.controller("myAngularMVCController",function($scope)
{ 
 $scope.contactList = [];
 $scope.fetch = function(contactName)
 { 
     var wh = new SObjectModel.contact();     
     wh.retrieve({where: {Name: {eq: contactName }}}, function(err, records, event)
     {
         if(err) 
         {
             alert(err.message);
         }
         else 
         {
          $scope.contactList=[];            
             records.forEach(function(record) 
             {              
              $scope.contactList.push(ContactWrapper.contact(record));
             });
             $scope.$apply();
         }
     });
 };
});
var ContactWrapper = function() 
{

};

ContactWrapper.contact = function(model) 
{
 var wrap = new ContactWrapper();
 wrap.id = model.get('Id');
 wrap.Name = model.get('Name');
 wrap.Phone = model.get('Phone');
 return wrap;
}

Preview

Static Resource Structure