I need help with this code can someone please suggest what must I do to bring the names of contacts in the table on page load. What I have done is I saw this

http://www.saaspie.com/2015/03/27/developing-simple-application-in-salesforce-using-angular-js/

and implemented Angular JS from there and then replaced the code for fetching contacts list using remote actions. I am getting the contacts array in a variable that is declared out of scope but not loading on page as I want

my page code is

<apex:page controller ="SampleRemoteActionWithAngularJS" standardStylesheets="false" applyHtmlTag="false" sideBar="false" showHeader="false">

var app = angular.module('MyApp',[]); var mytestvar; app.controller('myController',['$scope',function($scope) { $scope.ctdata; $scope.ContactData = Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.SampleRemoteActionWithAngularJS.getContacts}', function(result, event) { console.log(result); $scope.ctdata = result; mytestvar = result; }); }]); Name {{Contactvar.Name}} Show Alert !!!

and apex code is

public with sharing class SampleRemoteActionWithAngularJS {

@RemoteAction
public static list<contact> getContacts()
{
    return [SELECT Id, Name FROM contact limit 10];
}

}

Please help I want to learn this