Angular Js Validation on Partial Views - angularjs

Question

Index Page
#model AngularMVC.Models.Employee
#{
ViewBag.Title = "Home Page";
}
<style>
input.ng-touched.ng-invalid {
border: 1px solid red;
}
input.ng-touched.ng-valid
{
border: 1px solid #48bb00;
}
li{
border:1px solid blue;
font-size:2em;
color:Green;
}
</style>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/Custom/modules.js"></script>
<div ng-app="myApp">
<form ng-controller="validateCtrl"
name="myForm" novalidate ng-submit="submit()">
<span ng-show="isViewLoading">
<img src="~/Content/images/box.gif" /> loading...
</span>
<div class="{{status}}">{{message}}</div>
<p>
<b>Name:</b> <br>
#Html.TextBoxFor(m => m.Name, new { #class = "form-control", #ng_required = "true", ng_model = "Model.name", Name = "name" })
<span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid">
<span ng-show="myForm.name.$error.required">Username is required.</span>
</span>
</p>
<p>
<b>Email:</b><br>
#Html.TextBoxFor(m => m.Email, new { #class = "form-control", #ng_required = "true", ng_model = "Model.email", Name = "email", type = "email" })
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<b>Password:</b><br />
#Html.PasswordFor(m => m.Password, new { ng_model = "Model.password", #ng_required = "true", #class = "form-control", ng_minlength = "8", ng_maxlength = "16", Name = "password" })
<span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<span ng-show="myForm.pass.$error.required">Password is required.</span>
<span ng-show="myForm.password.$touched && myForm.password.$error.minlength">Passord must be 8-16 character</span>
<span ng-show="myForm.password.$touched && myForm.password.$error.maxlength">Passord must be 8-16 character</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.$invalid" value="Submit">
</p>
</form>
#*<p>Main</p>
First*#
Second
<div class="panel panel-default">
<div class="panel-heading">
{{PanelHeading}}
</div>
<div ng-view class="panel-body">
</div>
</div>
</div>
Module.js
var app = angular.module('myApp', ['ngRoute']);
app.controller('validateCtrl', function ($scope, $http) {
$scope.submit = function () {
//$scope.model = #Html.Raw(Json.Encode(Model));
$scope.isViewLoading = true;
$http({
method: "post",
url: "/Home/Create",
data: { emp: $scope.Model }
}).success(function (data, status, header, config) {
if (data = "Success") {
$scope.status = "text-success";
$scope.message = "Data successfully submitted";
}
else {
$scope.status = "text-warning";
$scope.message = "Failed to insert Data";
}
}).error(function (data, status, header, config) {
$scope.status = "text-danger";
$scope.message = 'Unexpected Error while saving data!!';
});
$scope.isViewLoading = false;
}
});
// Routes Provider for SPA
app.config(function ($routeProvider) {
$routeProvider
.when('/first', {
templateUrl: '/Home/first',
controller: 'HomeController',
})
.when('/second', {
templateUrl: '/Home/Second',
controller: 'HomeController'
})
});
Partial View Having a signup form
<div>
<form action="/Home/SignUp" name="signupForm">
<p>
<b>First Name:</b><br />
<input type="text" class="form-control" ng-required="true" ng-model="fname" name="fname" />
<span ng-show="signupForm.fname.$dirty&&signupForm.fname.$invalid" style="color:red">
<span ng-show="signupForm.fname.$error.required">First Name is required</span>
</span>
</p>
<p>
<b>Last Name:</b><br />
<input type="text" class="form-control" ng-required="true" ng-model="lname" name="lname"/>
<span ng-show="signupForm.lname.$dirty&&signupForm.lname.$invalid" style="color:red">
<span ng-show="signupForm.lname.$error.required">Last Name is required</span>
</span>
</p>
<p>
<b>Email:</b><br />
<input type="email" class="form-control" ng-required="true" name="email" ng-model="email"/>
<span ng-show="signupForm.email.$dirty&&signupForm.email.$invalid" style="color:red">
<span ng-show="signupForm.email.$error.required">Email is required</span>
<span ng-show="signupForm.email.$error.email"></span>
</span>
</p>
<p>
<b>Age:</b><br />
<input type="number" class="form-control" ng-required="true" ng-model="age"/>
<span ng-show="signupForm.age.$dirty&&signupForm.age.$invalid" style="color:red">
<span ng-show="signupForm.age.$error.required">Age is required</span>
<span ng-show="signupForm.age.$error.max ||signupForm.age.$error.min ">Age must be in between 18- 60 years</span>
</span>
</p>
<p>
<b>Password:</b><br />
<input type="password" class="form-control" ng-required="true" ng-model="password" name="password" ng-maxlength="16" ng-minlength="8"/>
<span ng-show="signupForm.password.$dirty&&signupForm.password.$invalid" style="color:red">
<span ng-show="signupForm.password.$error.required">Passowrd is required</span>
<span ng-show="signupForm.password.$error.maxlength ||signupForm.password.$error.minlength "></span>
</span>
</p>
<p>
<b>Confirm Password:</b><br />
<input type="password" class="form-control" ng-required="true" ng-model="conPassword" name="conPassword" ng-maxlength="16" ng-minlength="8" ng-equal="password"/>
<span ng-show="signupForm.conPassword.$dirty&&signupForm.conPassword.$invalid" style="color:red">
<span ng-show="signupForm.conPassword.$error.required">Passowrd is required</span>
<span ng-show="signupForm.conPassword.$error.maxlength ||signupForm.conPassword.$error.minlength "></span>
<span ng-show="signupForm.conPassword.$error.equal">Password do not match</span>
</span>
</p>
<p>
<b>Upload Profile Picture:</b><br />
<input type="file" value="Upload" /><input type="submit" value="Upload" ng-click="Upload()" ng-required="true"/>
</p>
<input type="submit" value="Submit" class="btn btn-default" ng-disabled="signupForm.$invalid"/>
</form>
I am Loading Partial View inside in ng-view in Index page but angular validation is not working inside the ng-view partial view . Please help anyone?