AngularJS - $compile and scopes

HTML

<div ng-controller="AngularCtrl">
 <div class="col-md-3" id="subjects">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Subjects</h3>
                    </div>
                    <div class="panel-body">
                        <div class="list-group">
                            <span ng-repeat="subject in subjects" class="list-group-item" target="#courselistings" ng-click="showDetail($index)">
                                {{subject.text}} 
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3" id="courselisting">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Courses</h3>
                    </div>
                    <div class="panel-body">
                        <div class="list-group" id="courselistings">
                            test
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6" id="courseinfo">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Course Info</h3>
                    </div>
                    <div class="panel-body">
                        <div class="list-group" id="courseinformation">

                        </div>
                    </div>
                </div>
            </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

function AngularCtrl($scope,$compile) {
     $scope.subjects = [
        {text:'English', courses:[
            {coursesub:'English 1', coursedata:[
                {coursedesc:'test'}
            ]
            }
        ]
        },
        {text:'Mathematics'},
        {text:'Science'}
    ];

    $scope.showDetail = function (todo) {
        var html= '<div><a ng-repeat="course in subjects['+todo+'].courses" class="list-group-item" target="#courseinformation" ng-click="showDetail(course)">{{course.coursesub}}</a></div>';
        var innerHTML =$compile(html)($scope) 
        var currente = angular.element(document.getElementById("courselistings"));
        
        currente.replaceWith(innerHTML);
    }
};