AngularJS not working with MVC Partial Views - asp.net-mvc

Question

I am having a strange problem. I am using AngularJS in my project. I have some partial views where I am having different implementations of AngularJS functionality. I am loading all my partial views via Ajax call. Ajax call does load partial view in container but its AngularJS functionality does not work. I have noticed that when I give reference to AngularJS via CDN then it works but when I copy and paste CDN JS into my local js file then it does not.
Please suggest what is the issue.
Here is the code:
Partial View:
<div ng-controller="EmployeeController">
<div>
ID: <input type="text" id="txtID" ng-model="employeeID" /><br />
Name: <input id="txtName" type="text" ng-model="employeeName" />
<button id="btnAddEmployee" ng-click="addEmployee()">Add Employee</button>
<button id="btnRemoveEmployee" ng-click="removeEmployee()">Remove Employee</button>
<ul >
<li ng-repeat="employee in employees">
Employee id is: {{employee.id}}<br />
Employee name is: {{employee.name}}
</li>
</ul>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var employees = [{ name: 'ABC', id: '1' },
{ name: 'XYZ', id: '2' },
{ name: 'KKK', id: '3' }];
function EmployeeController($scope) {
$scope.employees = employees;
$scope.addEmployee = function () {
$scope.employees.push({ name: $scope.employeeName, id: $scope.employeeID });
}
$scope.removeEmployee = function () {
$scope.employees.pop();
}
}
</script>
Controller:
public PartialViewResult LoadViews(int id)
{
if (id == 1)
return PartialView("TestView1Partial");
else
return PartialView("TestView2Partial");
}
Main View:
<ul>
<li>
View 2
</li>
</ul>
<div id="dvContainer">
<script>
function LoadView2() {
$.ajax({
url: "/home/LoadViews?id=2",
type: "GET",
datatype: "html",
async:true,
success: function (result) {
$("#dvContainer").html(result);
}
});
}
</script>
Thanks,
JSHunjan

Answer 1

In your Ajax call change the async:false and it might work.