Issue with Visualforce with remote objects and angularjs

Question

The data is being retrieved but is not updating the bind variables on the page below is the url to VF page that i am using .

https://vffiddle.herokuapp.com/945#

Please advise .

Thanks, Sandeep

Added from the link

<apex:page showHeader="true" sidebar="true">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <apex:remoteObjects jsNamespace="test" >
        <apex:remoteObjectModel name="Test__c" jsShorthand="TB" fields="Name,Id"> 
            <apex:remoteObjectField name="Email__c" jsShorthand="email"/>  
        </apex:remoteObjectModel>
    </apex:remoteObjects>
    <div ng-app="app" ng-controller="MyCtrl" >
        <input id="textid" type="text" placeholder="Search Text" ng-model="SearchText" />
        <button ng-click="searchRec();">Search</button>    
        <table >
            <tr >
                <th>
                    <span >emails</span>
                </th>
            </tr>
            <tr ng-repeat="x in emails">
                <td data-label="activity"  >
                    <span > {{ x.email}}</span>
                </td>
            </tr>
        </table>            
    </div>            
    <script>
    var app = angular.module('app', []);
    var lst=[];
    app.controller('MyCtrl', function($scope) {
        var en = new test.TB();
        $scope.searchRec = function(){
             alert('insidecalculateService');
            console.log($scope.SearchText); 
            en.retrieve({where:{email:{like:"%"+$scope.SearchText+"%"}},limit: 30 }, function(err, records, event){
                if(err) {
                    alert(err.message);
                }
                else {              
                    console.log('test:'+records[0].get("email"));
                    alert('test:'+records[0].get("email"));
                    records.forEach(function(record) {

                        lst.push({email:record.get("email")});
                    });
                }   
                $scope.calculateService();
            });  
        };
        $scope.calculateService = function(){ 
            console.log('insidecalculateService',lst);
            alert('insidecalculateService'+lst);
            $scope.emails=lst;
            $scope.SearchText='';
            //lst=[]; 
        };  
    });         
    </script>
</apex:page>

Answer 1

Here is the page/code from the link in the question changed to work with Contact so it can run without your Test__c custom object and with the critical fix added between the two // xxx comments towards the end:

<apex:page showHeader="true" sidebar="true">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <apex:remoteObjects jsNamespace="test" >
        <apex:remoteObjectModel name="Contact" jsShorthand="TB" fields="Name,Id"> 
            <apex:remoteObjectField name="Email" jsShorthand="email"/>  
        </apex:remoteObjectModel>
    </apex:remoteObjects>
    <div ng-app="app" ng-controller="MyCtrl" >
        <input id="textid" type="text" placeholder="Search Text" ng-model="SearchText" />
        <button ng-click="searchRec();">Search</button>    
        <table >
            <tr >
                <th>
                    <span >emails</span>
                </th>
            </tr>
            <tr ng-repeat="x in emails">
                <td data-label="activity"  >
                    <span > {{ x.email}}</span>
                </td>
            </tr>
        </table>            
    </div>            
    <script>
    var app = angular.module('app', []);
    var lst=[];
    app.controller('MyCtrl', function($scope) {
        var en = new test.TB();
        $scope.searchRec = function(){
            console.log($scope.SearchText); 
            en.retrieve({where:{email:{like:"%"+$scope.SearchText+"%"}},limit: 30 }, function(err, records, event){
                if(err) {
                    alert(err.message);
                }
                else {              
                    console.log('test:'+records[0].get("email"));
                    records.forEach(function(record) {

                        lst.push({email:record.get("email")});
                    });
                }   
                $scope.calculateService();
            });  
        };
        $scope.calculateService = function(){ 
            console.log('insidecalculateService',lst);
            $scope.emails=lst;
            $scope.SearchText='';
            // xxx
            $scope.$apply();
            // xxx
        };  
    });         
    </script>
</apex:page>

The explanation is that as the retrieve function is not part of Angular and returns its results asynchronously, you must make the explicit $scope.$apply() call to notify Angular that there is a change in the model so that Angular then update the DOM. See e.g. AngularJS and scope.$apply for more depth on this subject.