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">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
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;
            
         }); 
      }]);
</script>
<div ng-app="MyApp">

<div ng-controller="myController">
<table>
<thead>
<th>
Name
</th>
</thead>
<tr ng-repeat="Contactvar in ctdata">
<td>{{Contactvar.Name}}</td>
</tr>
<tbody >
</tbody>
</table>
<button onclick ="alert(JSON.stringify(mytestvar))">Show Alert !!!</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</apex:page>





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