How to work with model data and angular js

Question

i want to design my page this way. suppose when first time request comes for a controller then model data will be pass to view and angular will capture that data and build a tabular UI.

i found one link with MVC and knockout js from this link http://forums.asp.net/t/1937736.aspx?return+json+for+knockout+from+action+method+when+page+render+to+populate+html+controls

model

public class MyData{

   public int Value1 {get;set;}
   public int Value2 {get;set;}
}

Action method

public ActionResult Index()
{
    List<MyData> data = new List<MyData>(); //change this with how you retrieve data
    return View(data);
}

view

<script type="text/javascript">
$(function(){
   var dataObject = JSON.parse('@Html.Raw(Json.Encode(Model.ToList()))');
});
</script>

i do not want to call server side function from client side when page render at client side rather i want to emit data at client side from server side and Angular will capture it and populate UI. just tell me how it could be possible with code sample. thanks

Answer 1

You don't want that variable wrapped in $(function(){}) for 2 reasons.

First it creates a closure so you can't access it from outside the wrapping function and second it won't be defined until the ready event fires which is after you need it.

Just do:

<script type="text/javascript">    
   var dataObject = JSON.parse('@Html.Raw(Json.Encode(Model.ToList()))');    
</script>

Then you can access that global variable from anywhere within angular to pass it to a service, constant or whatever you want to use it for.

Remember that angular is just javascript, so javascript scoping rules apply and any global variable is at the top of the scope chain