AngularJS in ASP.NET MVC Partial View

Question

I am currently loading Partial View returned by MVC controller to a bootstrap model via AngularJS $http.get call. My View in rendered properly in modal dialog, but the only problem is that my partial view which is rendered also uses angular and for some reason angular is not working in my partial view, but if the i convert the same partial view to a normal view it works properly.

Partial View Code:

 @{
    ViewBag.Title = "Add Article Types";
}
//other scripts files e.g app.js and angular.js are included in main layout file.
<script src="~/Scripts/Angular/ArticleTypeController.js"></script>
<div class="modal-content" ng-controller="ArticleTypeController">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        Add New Article Type
    </div>
    <form novalidate role="form" name="ArticleTypeForm" ng-submit="ArticleTypeForm.$valid && Add(model)">
        <div class="modal-body">
            <div class="form-group">
                <label for="ArticleType" class="control-label">Article Type</label>
                <input type="text" required ng-model="model.ArticleTypeName" class="form-control" id="ArticleType" />
            </div>
        </div>

    </form>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" value="Add" >Add</button>
        {{ArticleTypeForm.$valid}}
    </div>
</div>

Controller to load modal with the partial view.

MenuController.js

angular.module('myApp').controller('MenuController', [
        '$scope', '$http', 'httpPreConfig', function ($scope, $http, httpPreConfig) {

            $scope.AddArticleType = function () {
                $.get("/ArticleType/Add")//returns the partial view.
                    .success(function (response) {
                        ShowModal(response);//it properly shows the modal. but angular doesn't work
                    });
            }
        }]);

As you can see from the image below that angular expression is not being evaluated.

Any help would be really appreciated. Just so that you know, angular expressions etc. are working in normal views.

Answer 1

Perhaps the view you're returning is not compiled by Angular. Try compiling it before displaying it in the modal by the $compile service and linking to a correct scope:

$scope.AddArticleType = function () {
    $.get("/ArticleType/Add")
        .success(function (response) {
            $compile(response)($scope);
            ShowModal(response);
        });
}

But actually, this is not the right thing to do in the Angular world. IMO it would be better to use ng-include to load your content inside the modal and then show it to the user.