Bootstrap not working inside ng-view - angularjs

Question

Im working on an app that uses MVC and angular for routing. Everything works fine. I'm having problem using Bootstrap for the looks inside my ng-view. I have a _Layout.cshtml (base file for layout).
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year</p>
</footer>
</div>
<script src="~/js/plugins/jquery/jquery.min.js"></script>
<script src="~/js/plugins/jquery/jquery-ui.min.js"></script>
<script src="~/js/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/plugins/bootstrap/bootstrap-datepicker.js"></script>
This is a just a part of the code.
Under views i have a Home Page as follows
<div data-ng-non-bindable>
<div id="home" data-ng-controller="rootViewModel">
<div ng-view >
</div>
</div>
and final i have a view
<div class="page-content-wrap">
<div class="row">
<div class="col-md-12">
<!-- START DEFAULT WIZARD -->
<!-- START WIZARD WITH SUBMIT BUTTON -->
<div class="block">
<h4>Register organization</h4>
<form action="javascript:alert('Submited!');" role="form" class="form-horizontal">
<div class="wizard show-submit">
<ul>
<li>
<a href="#step-5">
<span class="stepNumber">1</span>
<span class="stepDesc">User<br /><small>Personal data</small></span>
</a>
</li>
<li>
<a href="#step-6">
<span class="stepNumber">2</span>
<span class="stepDesc">Contact<br /><small>Information</small></span>
</a>
</li>
</ul>
<div id="step-5">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>One Column</strong> Layout</h3>
<ul class="panel-controls">
<li><span class="fa fa-times"></span></li>
</ul>
</div>
<div class="panel-body">
<p>This is non libero bibendum, scelerisque arcu id, placerat nunc. Integer ullamcorper rutrum dui eget porta. Fusce enim dui, pulvinar a augue nec, dapibus hendrerit mauris. Praesent efficitur, elit non convallis faucibus, enim sapien suscipit mi, sit amet fringilla felis arcu id sem. Phasellus semper felis in odio convallis, et venenatis nisl posuere. Morbi non aliquet magna, a consectetur risus. Vivamus quis tellus eros. Nulla sagittis nisi sit amet orci consectetur laoreet. Vivamus volutpat erat ac vulputate laoreet. Phasellus eu ipsum massa.</p>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Organization name</label>
<div class="col-md-6 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-pencil"></span></span>
<input type="text" class="form-control" data-ng-model="organization.TenantName"/>
</div>
<span class="help-block">The name should be unique, the name should identify your organization</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Phone number</label>
<div class="col-md-6 col-xs-12">
<div class="input-group">
<span class="input-group-addon" ><span class="fa fa-phone"></span></span>
<input type="text" data-ng-model="organization.PhoneNumber" class="form-control" />
</div>
<span class="help-block">Cell number for primary communication</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Email</label>
<div class="col-md-6 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-envelope"></span></span>
<input data-ng-model="organization.Email" type="text" class="form-control" />
</div>
<span class="help-block">Valid email address</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Description</label>
<div class="col-md-6 col-xs-12">
<textarea data-ng-model="organization.Description" class="form-control" rows="5"></textarea>
<span class="help-block">Briefly describe your organization</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Logo</label>
<div class="col-md-6 col-xs-12">
<input data-ng-model="organization.Logo" type="file" class="fileinput btn-primary" name="filename" id="filename" title="Browse file" />
<span class="help-block">Input type file</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Visibility</label>
<div class="col-md-6 col-xs-12">
<label class="check"><input id="toggle-one" data-ng-model="organization.IsPublic" ng-checked="organization.IsPublic" type="checkbox" class="icheckbox" checked="checked" /> Checkbox title</label>
<span class="help-block">To be visible to every one online check this box</span>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default">Clear Form</button>
<button class="btn btn-primary pull-right">Submit</button>
</div>
</div>
</div>
<div id="step-6">
<!--Select license data-->
</div>
</div>
</form>
</div>
<!-- END WIZARD WITH SUBMIT BUTTON -->
</div>
</div>
this view does not load datepicker bootstrap referenced in the layout, but css and angular controllers works fine. but when i remove the view and put it direct to my homepage.cshtml it works fine. the problem is the ng-view. any help will be appreciated. thanks