title: Getting and passing MVC Model data to AngularJS controller
body: <p>I'm pretty new to AngularJS and I'm at a loss here.</p>
  
  <p>Right now my MVC program uses Razor to display all the data in my .mdf database (i.e: <strong>@Html.DisplayFor(modelItem => item.LastName)</strong> ). However, I want to go mostly Angular. I am trying to use ng-repeat to display all of the Model data, but I am not sure how to pass that Model data to the Angular controller and then use it. I have tried serializing the Model to JSON in my ng-init, but I don't think I'm doing it right (obviously).</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// controller-test.js
  
  var myApp = angular.module('myModule', []);
  
  myApp.controller('myController', function ($scope) {
      $scope.init = function (firstname) {
          $scope.firstname = firstname;
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Index.cshtml --&gt;
  
  @model IEnumerable&lt;Test.Models.Employee&gt;
  
  @{
      ViewBag.Title = "Index";
  }
  
  &lt;div ng-app="myModule"&gt;
      &lt;div ng-controller="myController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))"&gt;
           &lt;table&gt;
               &lt;tr ng-repeat= &lt;!--THIS IS WHERE I'M STUCK --&gt;
           &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="~/Scripts/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/controller-test.js"&gt;&lt;/script&gt;
  @Scripts.Render("~/Scripts/angular.js")</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm not sure exactly what I should be repeating on to get the FirstName from the serialized Model. I feel like I have all the pieces, but just unsure how to connect them.</p>