Mapping existing data in AngularJS

Question

I'm starting to learn some AngularJS and am trying to determine its practicality when working along side ASP.NET MVC.

Let's say I have a view which displays beers from a repository in a table. I could output the information in two ways.

1.Using MVC's Razor Engine

Here, the model containing the beers is processed on the server and the html page rendered.

<h3>Rendered using Razor!</h3>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Colour</th>
            <th>Tasted?</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var beer in Model)
        {
            <tr>
                <td>@beer.Name</td>
                <td>@beer.Colour</td>
                <td>@beer.Tried</td>
            </tr>
        }
    </tbody>
</table>

2.Using Angular repeat

Here, the HTML is returned straight away and angular performs a AJAX call to the controller to retrieve its model. After it has that data it outputs it into the table.

<h3>Rendered using Angular!</h3>
<table class="table table-condensed table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Colour</th>
            <th>Tasted?</th>
        </tr>
    </thead>
    <tbody>

        <tr data-ng-repeat="beer in model">
            <td>{{ beer.Name }}</td>
            <td>{{ beer.Colour }}</td>
            <td>{{ beer.Tried }}</td>
        </tr>

    </tbody>
</table>

Controller

angular.module('BeerController', [])
.controller('BeerCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.model = {};

    $http.get('/Beer/GetBeers').success(function (data) {

        $scope.model = data;

    });


}]);

My Question

Is there a way to use the Razor engine for the initial load of the data and Angular for everything else (paging calls, searching etc.)? In other words, how do I bind existing html to a controllers model in AngularJS?

<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Colour</th>
            <th>Tasted?</th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>Fosters</td>
                <td>Gold</td>
                <td>True</td>
            </tr>
            <tr>
                <td>Becks</td>
                <td>Amber</td>
                <td>False</td>
            </tr>
            <tr>
                <td>Cobra</td>
                <td>Gold</td>
                <td>True</td>
            </tr>
    </tbody>
</table>

Answer 1

In your MVC Controller

    public ActionResult Index()   
    {

    var model =.....    

    //optional
    JsonSerializerSettings jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };

    ViewBag.data = JsonConvert.SerializeObject(model, Formatting.Indented, jsonSerializerSettings);

return View()

    }

In your view Index.cshtml

...
@section Scripts { 

//make sure that all anular scripts are loaded before that
<script>
angular.module('BeerController').service('dataService', function () {

var data= @Html.Raw(ViewBag.data);

return  {

data:data

}

});
...
</script>

}

Angular Part:

angular.module('BeerController', [])
.controller('BeerCtrl', ['$scope', '$http','dataService', function ($scope, $http,dataService) {

// now you can get data from your dataService without extra trip to your server
    $scope.model = dataService.data
....

}]);