获取数据的最佳方式，将其显示在列表中并将每个项目链接到详细信息页面

Question

我正在使用angularjs做一个项目，并且在弄清楚某些事情时会遇到一些麻烦。 所以基本上我通过包含一些大学课程的api获得.json。 我喜欢显示它们，当我点击其中一个时，应显示详细信息页面。

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');
    };
}

courses.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，但我认为这不是很漂亮。 那么做这样的事情最好的方法是什么？