Form validation in AngularJS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
        $scope.Active = true;
        $scope.Gender = "Male";
        $scope.countries = [{ Id: "1", Name: "United States" },
                            { Id: "2", Name: "India" },
                            { Id: "3", Name: "France" },
                            { Id: "4", Name: "Russia"}];
        $scope.Save = function (isValid) {
            if (isValid) {
                $scope.myForm.$setPristine();
                $scope.Message = "Name : " + $scope.Name + "\nCountry : " + $scope.Country +
                                "\nGender : " + $scope.Gender + "\nIsActive : " + $scope.Active;
            }
            else {
                // Show error messages if Form not valid.
                if ($scope.myForm.$error.required != undefined) {
                    for (var i = 0; i < $scope.myForm.$error.required.length; i++) {
                        $scope.myForm.$error.required[i].$pristine = false;
                    }
                }
            }
        }
        $scope.Cancel = function () {
            $scope.Name = "";
            $scope.Country = "";
            $scope.Gender = "";
            $scope.Active = false;
            $scope.myForm.$setPristine();
        }
    } ]);
</script>
<div ng-app="myApp" ng-controller="myCntrl">
    <div class="container">
        <form name="myForm" novalidate>
        <div class="form-horizontal">
            <div class="form-group">
                <div class="col-md-6" ng-class="{ 'has-error' : myForm.Name.$invalid && !myForm.Name.$pristine }">
                    <label for="Name">Name</label>
                    <input type="text" class="form-control" name="Name" ng-model="Name" ng-minlength="3"
                        ng-maxlength="8" placeholder="Enter Name" required />
                    <span style="color: red" ng-show="myForm.Name.$error.required && !myForm.Name.$pristine">Name is required.</span> 
                    <span style="color: red" ng-show="myForm.Name.$error.minlength">Name is too short.</span> 
                    <span style="color: red" ng-show="myForm.Name.$error.maxlength">Name is too long.</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-6" ng-class="{ 'has-error' : myForm.Country.$invalid && !myForm.Country.$pristine }">
                    <label for="Name">Country</label>
                    <select class="form-control" name="Country" ng-model="Country" containercssclass="all"
                        ng-options="c.Id as c.Name for c in countries" ng-disabled="disabled" required>
                        <option value="">Select Country</option>
                    </select>
                    <span style="color: red" ng-show="myForm.Country.$error.required && !myForm.Country.$pristine">Select Country.</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-6">
                    <label>Gender</label>
                    <br />
                    <input type="radio" name="gender" value="Male" class="sm-form-control" ng-model="Gender" required />Male
                    <input type="radio" name="gender" value="Female" class="sm-form-control" ng-model="Gender" required />Female
                    <br />
                    <span style="color: red" ng-show="myForm.gender.$error.required && !myForm.gender.$pristine">Select Gender.</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-6">
                    <label><input type="checkbox" name="Status" class="sm-form-control" ng-model="Active" required />Active</label>
                    <br />
                    <span style="color: red" ng-show="myForm.Status.$error.required && !myForm.Status.$pristine"> Select Status.</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-6">
                    <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="Save(myForm.$valid)">Submitt</button>
                    <button class="btn btn-danger btn-sm" ng-click="Cancel()">Clear</button>
                </div>
            </div>
        </form>
    </div>
    <span><pre>{{Message}}</pre></span>
</div>