Routes.cshtml

@model IEnumerable<TechPro.Web.UI.Areas.Admin.Controllers.HomeController.RouteViewModel>

<div ng-app="routesModule">
    <h3>Routes</h3>

    <input type="text" placeholder="Filter by Url" ng-model="query.Url" />

    <div ng-controller="RouteListController" ng-cloak>
        <p>Total Routes: {{(routes | filter:query).length}}</p>

        <table class="table table-striped table-condensed">
            <th>Methods</th>
            <th>Url</th>
            <th>Defaults</th>
            <th>Constraints</th>
            <th>Data Tokens</th>

            <tr ng-repeat="route in routes | filter:query | orderBy: 'Url'">
                <td>{{route.Methods}}</td>
                <td>{{route.Url}}</td>
                <td>
                    <ul ng-repeat="item in route.Defaults">
                        <li><strong>{{item.Key}}:</strong> {{item.Value}}</li>
                    </ul>
                </td>
                <td>
                    <ul ng-repeat="item in route.Constraints">
                        <li><strong>{{item.Key}}:</strong> {{item.Value}}</li>
                    </ul>
                </td>
                <td>
                    <ul ng-repeat="item in route.DataTokens">
                        <li><strong>{{item.Key}}:</strong> {{item.Value}}</li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>
    <script src="/scripts/ext/angular.js"></script>
    <script>
        var routeApp = angular.module("routesModule", []);

        routeApp.controller("RouteListController", function($scope) {
            $scope.routes = @Html.Raw(Json(Model));
        });
    </script>
</div>