AngularJS: How to Set MVC Model Data value using AngularJS instead of Razor?

Question

I use Razor to display all the data in my MVC project:

@Html.TextBoxFor(model => model.Birthday, new {id = "birthday"})   

I'm pretty new in AngularJS; Now, I want to use AngularJS,( Example).

But now, I don't know how I can set the model.Birthday in this way.
I've set

ng-app="myApp"

for the div tag, which includes

<label>Birthday:</label>
<adm-dtp ng-model='date'></adm-dtp>  

@*@Html.TextBoxFor(model => model.Birthday, new {id = "birthday"})*@

and,

<script>
    var app = angular.module('myApp', ['ADM-dateTimePicker']);
    app.controller('dateController',function() {
        var self = this;
    });
</script>

Answer 1

Well, you could always set the date model in your Angular controller:

<script>
    var app = angular.module('myApp', ['ADM-dateTimePicker']);
    app.controller('dateController',function() {
        var self = this;
        self.date = '@Model.Birthday';
    });
</script>

This assumes that you have placed your Angular code inside the Razor view, instead of a separate javascript file. Usually it's bad practice to mix ASP.NET MVC and AngularJS. If you are going to write a SPA application based on AngularJS then you probably don't need any Razor or ASP.NET MVC whatsoever. What you need is an ASP.NET Web API that will be consumed by your pure SPA Angular application. A simple static html to serve and bootstrap your SPA application will be more than enough. This SPA application will then simply query your RESTful API in order to retrieve whatever information it needs in order to bootstrap. Right now you seem to be trying to create some hybrid which might not be the best approach in this case.