How to validate ng-blur using Bootstrap & angular - angularjs

Question

Here I am using ng-blur for checking if email exits or not.It is working as I expected but why it's not getting validated in ng-show.
<form name="f1" novalidate ng-submit="Save(emp)">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<b style="font-family: Arial; text-transform: capitalize; text-align:left ">Enter EmailId</b>
</div>
<div class="col-sm-8 left-addon">
<input type="email" class="form-control" name="Mail" ng-model="Eamil" ng-blur="ChkAvailableEmail()" ng-class="submitted?'ng-dirty':''" required />
<i class="glyphicon glyphicon-envelope"></i>
<span class="Error" ng-show="(f1.Mail.$dirty ||submitted) && f1.Mail.$error.email">Please Enter Your Valied Email</span>
<span class="Error" ng-show="f1.Mail.$error.ChkAvailableEmail">Email in Use Please try new one</span>
</div>
</div>
</div>
</form>
AngularJs
$scope.ChkAvailableEmail = function () {
var chk = {
Email: $scope.Eamil
}
var mail = $Myservice.GetValidEmail(chk);
mail.then(function (d) {
})
}
HomeController.cs
public JsonResult ChkEmail(string Email)
{
var x = (from n in db.Accessors
where n.Email == Email
select n).FirstOrDefault();
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}