Путь к странице AngularJS с параметром: id

У меня есть приложение AngularJS, которое использует ngRoute для обработки маршрутизации приложения. Сама маршрутизация работает (URL-адрес перенаправляется на правильную страницу, а правильный частичный открыт), однако я не могу получить элемент, который мне нужен на второй странице.

На первой странице вы можете найти список документов (макет в настоящий момент, но в конечном итоге ссылку на API). Элементы списка можно щелкнуть и перенаправить на вторую страницу, где перечислены детали документа.

Я расскажу, как я пытаюсь достичь этого в настоящий момент, но я открыт для предложений, если у кого-то есть идеи о том, как это решение можно улучшить.

app.js

angular.module("app", ["ngRoute", "ngAnimate"])
.config(function($routeProvider){
    $routeProvider
        .when("/main", {
            templateUrl: "Views/main.html",
            controller: "MainController"
        })
        .when("/document/:id", {
            templateUrl: "Views/document.html",
            controller: "DocumentController"
        })
        .otherwise({redirectTo: "/main"});
});

main.html

<link rel="stylesheet" href="Stylesheets/main.css" type="text/css">

<div id="docSearchPanel" class="col-xs-12">
    <ng-include src="'Views/Partials/documentSearchForm.html'"></ng-include>
</div>

<div id="formSearchResultsArea">
        <div id="documentsFoundHeader">Documents Found</div>
    <div id="documentsTableContainer">
        <table id="documentsTable" class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="doc in documents" ng-click="showDocument()">
                    <td>{{doc.documentID}}</td>
                    <td>{{doc.documentTitle}}</td>
                    <td>{{doc.documentStatus}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

main.ctrl.js

angular.module("app").controller("MainController", function($scope, $location){

    //This is populated by a function I have removed to keep the code simple
    $scope.documents = []           

    $scope.showDocument = function(){
        $scope.activeDocument = this.doc;
        $location.path("document/"+this.doc.documentID);
    };
});

document.html

<form ng-submit="downloadForm()" class="col-xs-12 col-md-6">
    <h2>Document Details</h2>
    <div class="row">
        <h3>{{activeDocument.documentTitle}}</h3>
    </div>
    <div class="row" ng-repeat="field in selected.fields">  
        <div class="form-group">
            <div class="document-attribute-header col-xs-5">{{field.key}}</div>
            <div class="document-attribute-value col-xs-7">{{field.val}}</div>
        </div>
    </div>
</form>

document.ctrl.js

angular.module("app").controller("DocumentController", function($scope, $location, $routeParams){
    $scope.activeDocument = getActiveDocument($routeParams.id);

    function getActiveDocument(id){
        for (var d in $scope.documents){
            var doc = $scope.documents[d];
            if (doc.documentID == id)
                return doc;
        }
    }
});