title: AngularJS in ASP.NET MVC Partial View
body: <p>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.</p>
  
  <p>Partial View Code:</p>
  
  <pre><code> @{
      ViewBag.Title = "Add Article Types";
  }
  //other scripts files e.g app.js and angular.js are included in main layout file.
  &lt;script src="~/Scripts/Angular/ArticleTypeController.js"&gt;&lt;/script&gt;
  &lt;div class="modal-content" ng-controller="ArticleTypeController"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          Add New Article Type
      &lt;/div&gt;
      &lt;form novalidate role="form" name="ArticleTypeForm" ng-submit="ArticleTypeForm.$valid &amp;&amp; Add(model)"&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="ArticleType" class="control-label"&gt;Article Type&lt;/label&gt;
                  &lt;input type="text" required ng-model="model.ArticleTypeName" class="form-control" id="ArticleType" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="submit" class="btn btn-primary" value="Add" &gt;Add&lt;/button&gt;
          {{ArticleTypeForm.$valid}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller to load modal with the partial view.</p>
  
  <p>MenuController.js</p>
  
  <pre><code>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
                      });
              }
          }]);
  </code></pre>
  
  <p>As you can see from the image below that angular expression is not being evaluated.
  <img src="https://i.stack.imgur.com/Y0txl.png" alt="As you can see from the image below that angular expression is not being evaluated."></p>
  
  <p>Any help would be really appreciated.
  Just so that you know, angular expressions etc. are working in normal views.</p>