Umbraco Login Form with Angular validation

UmbracoLoginForm

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@using System.Web.Mvc.Html
@using ClientDependency.Core.Mvc
@using Umbraco.Web
@using Umbraco.Web.Models
@using Umbraco.Web.Controllers

@{
    var loginModel = new LoginModel();

    Html.RequiresJs("https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js");
    Html.RequiresJs("/scripts/app.js");
}

<div ng-controller="LoginFormController">
    @using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin", null, new { novalidate = "", name = "loginform", ng_submit = "loginFormSubmit($event)" }, FormMethod.Post))
    {
        <fieldset>
            <legend>Login</legend>

            @Html.LabelFor(m => loginModel.Username)
            @Html.TextBoxFor(m => loginModel.Username, new { name = "username", ng_model = "username", ng_pattern= "emailRegex", required = "required" })
            <p ng-show="validation && loginform['loginModel.Username'].$error.required">Username is required</p>
            <p ng-show="validation && loginform['loginModel.Username'].$error.pattern">Please enter valid email address</p>
            <br />

            @Html.LabelFor(m => loginModel.Password)
            @Html.PasswordFor(m => loginModel.Password, new { name="password", ng_model = "password", required = "required" })
            <p ng-show="validation && loginform['loginModel.Password'].$error.required">Password is required</p>
            <br />

            <button>Login</button>
        </fieldset>
    }
</div>