title: How do I pass MVC model data to AngularJS controller scope
body: <p>In my application I'm returning the view below which uses this TestViewModel.</p>
  
  <pre><code>public class TestViewModel
  {
      public List&lt;string&gt; Tests { get; set; }
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>@model AdminSite.Models.TestsViewModel
      @{
          ViewBag.Title = "Tests";
      }
  
      &lt;hgroup class="title"&gt;
          &lt;h1&gt;@ViewBag.Title&lt;/h1&gt;
      &lt;/hgroup&gt;
  
      &lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;script src="~/Scripts/Angular/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="~/Scripts/Angular/Tests.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div ng-app="testsTable"&gt;
              &lt;div ng-controller="TableController"&gt;
                  &lt;table my-table options="options"&gt;&lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>As you can see I'm using AngularJS to create a DataTable, what I would like though is that instead of the table data "aaData" being hardcoded I want it to be from TestViewModel model.</p>
  
  <pre><code>var app = angular.module('testsTable', []);
  
  app.directive('myTable', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attrs, controller) {
              var dataTable = element.dataTable(scope.options);
          },
          scope: {
              options: "="
          }
      };
  });
  
  
  app.controller('TableController', ['$scope', function ($scope) {
      $scope.options = {
          aoColumns: [
              {
                  "sTitle": "Col 1",
              },
              {
                  "sTitle": "Col 2"
              },
              {
                  "sTitle": "Col 3"
              }
          ],
          aoColumnDefs: [{
              "bSortable": true,
          }],
          bJQueryUI: true,
          bDestroy: true,
          aaData: [
              ["A", "B", "C"],
              ["A", "B", "C"],
  
          ]
      };
  }]);
  </code></pre>
  
  <p>I think I may have to create another directive to bind the model e.g </p>
  
  <pre><code>&lt;table my-table options="options" model-data="@Model.Tests"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>but I'm not really sure how Angular directives work exactly, how I would write said directive &amp; how it binds it to the scope</p>