angularjs - データを取得してリストに表示し、各アイテムを詳細ページにリンクする最良の方法

Question

angularjs を使用してプロジェクトを行っていますが、いくつかのことを理解するのに少し苦労しています。したがって、基本的には、いくつかの大学のコースを含む API を介して .json を取得しています。それらを表示したいのですが、そのうちの1つをクリックすると詳細ページが表示されます。

function getcourses($scope, $http, $location, $rootScope){

$scope.init = function (){
    $scope.apiroot = "http://....";
    $http.get($scope.apiroot + 'courses.json').then(function(response){
        $scope.courses = response.data.courses;

    })
};
$scope.selectCourse = function (index) {
        $scope.detailcourse = $scope.courses[index];
        $location.path('/course');
    };
}

course.html:

<table ng-controller="getcourses" data-ng-init="init()">
...
<li ng-repeat="course in courses">
    <a ng-click="selectCourse($index)" ng-href="">{{course.title}}</a>
</li>

course.html:

<div class="panel panel-small" ng-controller="getcourses">
    <div class="panel-heading">{{detailcourse.title}}: {{detailcourse.subtitle}}</div>
      <div class="list-group">
        <class="list-group-item">{{detailcourse.description}}</class>
      </div>
    </div>      
</div>

このように、リンクをクリックしてリダイレクトされても何も表示されません。他のページが読み込まれるとすぐに、すべてのコースが再び取得されるためだと思いますか? rootScope で動作するようになりましたが、あまりきれいではないと思います。では、このようなことを行う最善の方法は何ですか?