How do I pass MVC model data to AngularJS controller scope
<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>