validation in angular js mvc asp.net-validation on page load

Question

angular.module('myApp').controller('Part3Controller', function ($scope, LoginService) {

$scope.Submited = false;

$scope.msg = "";

$scope.IsLoggedIn = false;

$scope.IsFormValid = false;

//initilize user data object

$scope.LoginData = {

UserName: '',

Password:''

}

//Check whether the form is valid or not using $watch

$scope.$watch("myForm.$valid", function (TrueOrFalse) {

$scope.IsFormValid = TrueOrFalse; //returns true if form valid

});

$scope.Login = function () {

$scope.Submited = true;

if ($scope.IsFormValid) {

LoginService.getUserDetails($scope.LoginData).then(function (d) {

debugger;

if (d.data.UserName != null) {

debugger;

$scope.IsLoggedIn = true;

$scope.msg = "You successfully Loggedin Mr/Ms " +d.data.FullName;

}

else {

alert("Invalid credentials buddy! try again");

}

});

}

}

})

.factory("LoginService", function ($http) {

//initilize factory object.

var fact = {};

fact.getUserDetails = function (d) {

return $http({

url: '/Data/Userlogin',

method: 'POST',

data:JSON.stringify(d),

headers: { 'content-type': 'application/json' }

});

};

return fact;

});

 

when i run application, validation shows on page load only.

i want validation after clicking login button.

 

please help me.