用它自己的 angularjs 控制器文件在 asp.net mvc 中显示局部视图

Question

我有一个 asp.net mvc 和 angularjs 项目，我想在模式中加载局部视图， 我想让每个局部视图都有自己的 angularjs 控制器及其脚本。 我的部分观点是这样的

index.cshtml

@{
    ViewBag.Title = "Modal Index";
    Layout = null;
}



<div class="row">
    <div ng-controller="ModalCtrl">
        @ViewBag.data1
        <div id="localjs"></div>
        <div>{{data}}</div>
    </div>
</div>
   
<script src="modalctrl.js" type="text/javascript"></script>

模态控制器

modalcontroller.cs

using System.Web.Mvc;

namespace Test1.Controllers
{
    public class ModalController : Controller
    {
        // GET: Modal
        public ActionResult Index()
        {
            ViewBag.data1 = "Data from Index with ViweBag";
            return View();
        }        

    }
}

我的模式 angularjs 控制器文件是这样的

modalctrl.js

var app;
app.controller('ModalCtrl', function ($http, $scope, $window) {
    $scope.data = "data from  angularjs";
});

我想要加载模态的主页就像

@{
    ViewBag.Title = "Home Page";
}
<div ng-controller="HomeCtrl">
    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <div class="btn btn-block btn-default" ng-click="ShowModal()">click me</div>
    </div>
</div>

<div class="modal" id="modal1" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">                
            </div>
            <div class="modal-footer">               
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我想要在模式中加载局部视图的主要 js 是这样的

mainpage.js

app.controller('HomeCtrl', function (
    $http, $scope, $window, $compile) {    
    $ = jQuery;   
    $scope.ShowModal = () => {
        $.get("/modal/index", function (response) {
            ShowModal(response);
        });
    }
    function ShowModal(content) {
        //var html = $complie(content)($scope);        
        $("#modal1 .modal-body").html(content);       
        $("#modal1").modal("show");
    }
})

我最后的结果是这样的

正如您在上面看到的，我尝试在以 html 显示之前编译我的内容，但是 angularjs 抛出一个错误，提示“名称为‘ModalCtrl’的控制器未注册”

有没有什么方法可以用自己的包含自己的控制器的 js 文件以模式显示部分内容？