Angularjs在MVC视图中形成验证，不显示错误消息

Question

这里是一个简单的MVC视图，在这里我试图使用angularJS进行表单验证。例如，您可以看到，如果用户名长度超过16个字符，则应将消息推送到屏幕上，说“用户名不能超过16个字符”。

我错过了什么吗？因为这不起作用。我在_layout.cshtml中有一个指向AngularJS文件的链接。

这是Razor View：

<style>
    .error {
        color: red;
    }
</style>

@using (Html.BeginForm("LoginUser", "Home", FormMethod.Post, new { name = "myForm" }))
{        

    <div ng-app="myApp" ng-controller="validateCtrl">

        <div class="login-wrapper">

            <div class="panel panel-default" style="width: 500px;">
                <div class="panel-heading">
                    <h3 class="panel-title">Log in to Birch Intranet</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label for="txtUsername">Username:</label>
                        <input type="text"
                            class="form-control"
                            id="txtUsername"
                            name="Username"
                            ng-model="Username"
                            placeholder="Username"
                            ng-maxlength="16" required />

                        <div class="error"
                            ng-show="myForm.Username.$dirty && myForm.Username.$invalid">
                            <small class="error"
                                ng-show="myForm.Username.$error.required">Username is required.
                            </small>
                            <small class="error"
                                ng-show="myForm.Username.$error.minlength">Username is required to be at least 3 characters
                            </small>
                            <small class="error"
                                ng-show="myForm.Username.$error.maxlength">Username cannot be longer than 16 characters
                            </small>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="txtPassword">Password:</label>
                        <input type="password"
                            class="form-control"
                            id="txtPassword"
                            name="Password"
                            ng-model="Password"
                            placeholder="Password"
                            ng-maxlength="2" required />
                        <div class="error"
                            ng-show="myForm.Password.$dirty && Password.$invalid">
                            <small class="error"
                                ng-show="myForm.Password.$error.required">Password is required.
                            </small>
                        </div>


                    </div>
                    <div class="remember" style="padding-bottom: 10px;">
                        <input id="remember-me" type="checkbox">
                        <label for="remember-me">Remember me</label>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <button type="submit" class="btn btn-default">Submit</button>
}

<script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function ($scope) {
        $scope.Username = 'Username';
        $scope.Password = 'Password';
    });
</script>