Как просмотреть отдельно требуемый идентификатор

Я мало знаком с процессом angular-route. С сервера я получаю объекты с id. Когда пользователь нажимает на соответствующий элемент, я хотел бы fetch данные соответствующего id и показать детали на новой странице.

Вот мой объект, который я получаю от бэкэнда:

{
    "project": {
        "issueResolved": 27,
        "issueReported": 83,
        "remaining": 304444906,
        "invoiceRaised": 202816725,
        "elapsed": 1694,
        "slipage": 351,
        "splash": true,
        "projectNote": "In incididunt sit elit cillum consequat proident veniam et.",
        "projectName": "project0"
    },
    "id": "61b7f5af909e89a2"
}

В конфигурации маршрута я добавил id в качестве параметра:

$routeProvider
            .when ("/projectSummary/:id", { //hre is the id.
                templateUrl : "views/projectSummary/projectSummary.html",
                controller  : "projectSummaryController",
                className   : "body-projectSummary"
        });

В элементе я добавил ссылку для обновления url с id - вот так:

.directive("activeTitle", function() {
    return {
        replace: true, //ng-href has id
        template: '<a ng-href="#/projectSummary/:id"><h2 class="active"><span class="title">{{activeApp.projectName}}</span><span class="note">{{activeApp.projectNote}}</span></h2></a>',
        link: function(scope, element, attrs) {
        }
    }
});

Но я не знаю, каков правильный поток работы, чтобы получить идентификатор от объекта и передать его в url и, соответственно, получить содержимое объекта. любой, пожалуйста, покажите мне правильный рабочий поток здесь?

мой контроллер:

"use strict";

angular.module("tcpApp")
    .controller("homeController", 

        ['$scope','server', '$location', '$anchorScroll', '$timeout',

        function ($scope, server,  $location, $anchorScroll, $timeout) {

        //on click of sub title updates to active title
        $scope.activate = function (num, item) {

            $scope.currentIndex = $scope.splashApps.indexOf(item);
            $scope.splashApps.splice($scope.currentIndex, 1, $scope.activeApp); 
            $scope.activeApp = item;
            $scope.activeStatus = $scope.activeApp.name;
            $scope.slipageCounter();

        }

        $scope.splash = server.query();

        $scope.splash.$promise.then(function (result) {

            $scope.allApps = result;
            $scope.galleryAppsLength = $scope.allApps.length;

            //filtering splash apps

            angular.forEach( $scope.allApps, function (app) {

                if(app.project.splash) {

                    this.push(app.project);

                }


            }, $scope.splashApps);

            splashAppsHandler();

        });




    }]);

HTML-шаблон:

<div class="content">
    <header-navi></header-navi>
    <div class="prSummaryTab">

        <div class="prSummaryBox">
            <h2>Project Info</h2>
            <div>
                <span>Description: </span>
                <span>Construction, completion and somethign will be there for aasf sfasf asf asfs </span>
            </div>
            <div>
                04  MAR  2015
                <a href="#"><!--comment--></a><a href="#"><!--comment--></a>
            </div>
        </div>
        <div class="prSummaryBox">
            <h2>Project Status</h2>
            <span>Design</span>
        </div>
        <div class="prSummaryBox">
            <h2>Contract Amount</h2>
            <span>92,016,4597</span>
        </div>
        <div class="prSummaryBox">
            <h2>Issues Details</h2>
            <span>17</span>
        </div>

        <ul class="naviPrInfo">
            <li class="active" ><a href="#">Status</a></li>
            <li><a href="#">Civil</a></li>
            <li><a href="#">Mechanical</a></li>
            <li><a href="#">Electrical</a></li>
            <li><a href="#">Engineering</a></li>
            <li><a href="#">Operation &amp; Maintanance</a></li>
        </ul>
    </div>



    <!-- inner content starts -->

    <div class="summaryContent">

        <!-- need to fill with id content -->

    </div>
    <gallery-menu></gallery-menu>

    <div class="appGallery" ng-show="galleryShow">
    <a ng-click="galleryChanger(-1)" class="prev">prev</a>
    <a ng-click="galleryChanger(1)" class="next">next</a>
    <all-apps-gallery index="$index" app="app" update="update(app)" class="show" ng-repeat="app in allAppsBatch"></all-apps-gallery>
</div>

</div>

<!-- footer -->

<body-footer></body-footer>