Angular code is not working in bootstrap modal - asp.net-mvc-4

Question

I am using angularJs, twitter bootstrap with asp.net mvc4. I didn't use angular-strap. I am trying to load a partial view in bootstrap modal. The partial view contains angular code.
Here is my code where I am calling the bootstrap modal:
#model IEnumerable<IMS.Domain.Model.GetAllRequisitions_Result>
#{
ViewBag.Title = "Requisition List";
Layout = "~/Views/Shared/MasterPage.cshtml";
}
Launch demo modal
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
</div>
</div>
<script type="text/javascript">
function loadCreateForm() {
var content = '#Url.Action("Create", "Requisition", new { area = "IMS" })';
$('div.modal-body').load(content);
}
</script>
Here is my code for 'Create' action of 'Requisition' controller:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div ng-app="">
<label>Sample: <input type="text" ng-model="sample" /></label>
<br />
<label>Show Value: {{sample}}</label>
</div>
<div class="ContainerRowButton">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
For ng-model="sample" when I am trying to show data by {{sample}} it stays {{sample}}. It's like my 'Create' action is not getting angularJs.
I've rendered all necessary scrips in the 'MasterPage.cshtml'. My MasterPage.cshtml contains:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/others")
And here is the code of my 'Bundle.config.cs' file:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/others").Include(
"~/Content/bootstrap/js/bootstrap.js",
"~/Scripts/jquery.dataTables.js",
"~/Scripts/dataTables_bootstrap.js",
"~/Scripts/bootstrap-dropdown.js",
"~/Scripts/jquery.dataTables.columnFilter.js",
"~/Scripts/Custom/CustomScript.js",
"~/Scripts/jquery.validationEngine-en.js",
"~/Scripts/jquery.validationEngine.js",
"~/Scripts/angular.js"
));
What wrong am I doing? Need help ...

Answer 1

Adding to what #Muctadir said, you need to tell angular to check your modal partial for angular elements. You do that by calling $compile before injecting the partial into the DOM. The problem is that you have to be able to get access to the $compile service and you can't do that inside of your loadCreateForm(), you can only do that from an angular module. So, you need to organize your code in such a way that you can get what you need. Here's my suggestion:
Create a directive to handle your modal and its contents:
.directive('myModal', function($compile){
return {
replace:false,
link: function(scope, element, attrs){
var content = '#Url.Action("Create", "Requisition", new { area = "IMS" })';
elem.load(content, null, function(){
$compile(elem.contents())(scope);
});
}
};
});
That will load the content and then compile the contents using the current scope, but only after the content has been loaded from the server. Hope that helps.