how to pass ASP.NET MVC view values to angular js controller

Using the very first tutorial I pulled up I grabbed this snippet:

var AwesomeAngularMVCApp = angular.module('AwesomeAngularMVCApp', ['ngRoute']);

AwesomeAngularMVCApp.controller('HomeController', HomeController);

var configFunction = function ($routeProvider) {
    $routeProvider.
        when('/Listings', {
            url: 'routesDemo/one'
        })
        .when('/Listing', {
            url: 'routesDemo/two'
        })
        .when('/Listings', {
            url: 'routesDemo/three'
        });
}
configFunction.$inject = ['$routeProvider'];

AwesomeAngularMVCApp.config(configFunction);

Now this how you link a view to a controller action in MVC:

using System.Web.Mvc;

namespace AwesomeAngularMVCApp.Controllers
{
    public class RoutesDemoController : Controller
    {
        public ActionResult One(string title)
        {
            var listings = db.Articles.Contain(title);
            return PartialView(listings, "..\Views\Shared\WhateverPartialView.cshtml");
        }

        [HttpPost]
        public async Task<ActionResult> Two(Article article)
        {
            if(ModelState.isValid){
                  _db.Add(article)
            }
            return View(article); //This one returns entire page
        }

        public JsonResult Three(string title)
        { 
            var listing = db.Articles.Where(t => t.Title == title).SingleOrDefault();
            return Json(listing, JsonRequestBehavior.AllowGet);
        }
    }
}

These partial views would be in the Views folder in a sub folder RoutesDemo

1. one.cshtml GET

2. two.cshtml POST ie: a href="#/Article/6" type=submit" class="btn"

   $("form").submit( function(){ $.ajax( function(url, data){ }); });

3. three.cshtml GET ie

   $.ajax({ url: '@Url.Action("routeDemo", "three")', //url: baseUrl + url, data: { search: searchBlue.val() }, success: function (data) { $("#msg").html("Results for" + searchBlue.val()); searchBlue.searchMeme({ searchComplete: true }); $('#main').fadeOut(800, function () { $('#main').html("" + data + "").fadeIn().delay(800); }); searchBlue.val(""); }, error: function (xhr, status, error) { alert(error); } });

If you want to pass values to the angular controller use razor syntax and bind the value to the html input. The top of the view file will make it so angular knows what type of object to expect.

IE: Top of Two.cshtml

 @model AwesomeAngularMVCApp.Article

That should be it besides route.config for angular

If you want to handle the Model object using razor syntax check out this tutorial. Pretty cut and dry.If that is not enough I will show example of binding @Model.attribute/property to an html element after work tomorrow

EDIT

<div class="row-fluid" ng-controller="PersonDetailsController" ng-init="[email protected]">

Angular injects it in the scope during initialization, so you can refer to it as $scope.personId