从自定义指令调用角度路由

我在ASP.NET MVC应用程序中有一个AngularJS。我的用例是一个手风琴，它是在点击事件时填充的。每个Item都是一个指令，在模板中我有两个div，一个显示表头，另一个隐藏。单击标题，我将用DOM填充隐藏的div并打开它，我尝试使用$http。我遇到了一个问题，不是用#解决路由，而是到我的MVC控制器

//这是我的主要角度模块

    window.progCheckList = angular.module("progCheckList", []);
    progCheckList.config(["$routeProvider", function ($routeProvider) {
        $routeProvider.when("/MainCheckList", {
           controller: "mainCheckListCtrl",
           templateUrl: "/AngularJSApp/ProgramCheckList/Templates/mainCheckList.html"
        })
        .when("/MDFDecisions", {
           controller: "mdfDecisionsCtrl",
           templateUrl: "/AngularJSApp/ProgramCheckList/Templates/mdfDecisions.html"
        })
        .otherwise({ redirectTo: '/MainCheckList' });
       }
    ]);
//Inside of MainCheckList I have
    <div style="clear: both; display: block;">
         <check-list-item data-ng-repeat="checkList in data.ProgramCheckList.ProgramCheckLists" value="checkList">
        </check-list-item>
    </div>
//CheckListItem is a directive
progCheckList.directive('checkListItem', function ($http) {
    return {
        restrict: 'E',
        templateUrl: "/AngularJSApp/ProgramCheckList/Templates/programCheckListItem.html",
        scope: { value: "=value" },
        transclude: true,
        link: function (scope, element, attrs) {
            element.find("button").on("click", function () {
            });
            element.find(".CheckListHeader").on("click", function () {
                if (scope.value.Action != null && scope.value.Action != "") {
                    if (element.find(".CheckListHeader").hasClass("collapsed")) {
                        $http({ method: 'GET', url: "Index#/MDFDecisions" }).
                            success(function (data, status, headers, config) {
                                console.log(element.parent().find(".CheckListHeader").parent().next());
                                element.find(".CheckListHeader").parent().next().html(data);
                                element.find(".CheckListHeader").removeClass("collapsed");
                                element.find(".CheckListHeader").addClass("expanded");
                                element.find(".CheckListHeader").parent().next().show("slow");
                            }).
                            error(function (data, status, headers, config) {
                                toastr("Unable to get action");
                            });
                        element.find(".CheckListHeader").parent().next().show("slow");
                    } else if (element.find(".CheckListHeader").hasClass("expanded")) {
                        element.find(".CheckListHeader").parent().next().empty();
                        element.find(".CheckListHeader").removeClass("expanded");
                        element.find(".CheckListHeader").addClass("collapsed");
                        element.find(".CheckListHeader").parent().next().hide("slow");
                    }
                }
            });
        }
    };
});
//The Template that I'm using for the Directive
<div class="program-checklist" style="clear: both; vertical-align: middle; margin: 0.4em; cursor: pointer;">
    <div style="height: 100%; width: 100%; resize: vertical;">
        <div style="vertical-align: middle;">
            <div class="CheckListHeader collapsed" style="float: left; vertical-align: middle; height: 3.5em;">
                <h4>{{value.Functionality}}</h4>
            </div>
            <div style="float: right; vertical-align: middle; margin-right: 2em;">
                <button class="btn btn-inverse updateCheckList" data-ng-click="UpdateStatus(value.CPMSCheckListId)">
                    Update Status
                </button>
                <img data-ng-src="{{value.IsReady && '../../Images/Checked.png' || '../../Images/UnChecked.png'}}" style="width: 36px; height: 36px; margin: 0.5em;" />
            </div>
        </div>
        <div style="clear: both; display: none; width: 100%; height: 20em; overflow: auto;">
        </div>
    </div>
</div

当我点击标题时，我希望用DOM填充下一个DIV，调用AngularJS路由"Index#/MDFDecisions"，我得到了非常奇怪的结果，它得到了Index MVC Action，而不是AngularJS路径。而且知道我怎样才能得到预期的结果吗？此外，我对代码的任何改进都持开放态度。这是我的第二个AngularJS应用程序，我正在使用这种方法。

提前谢谢。