如何验证角度js中的两个选择框

Question

这是我的html表单，必须用来获取详细信息，但是当我在select标记中使用required属性时，只有第一个被验证，而不是第二个或select标记之后的其他字段，例如如果我在第一个选择中选择选项并单击发布项目，则没有关于验证的错误，如果我不从第一个选择标记中选择数据，则会出现验证错误弹出窗口，表示该字段是必需的，

<form name="myForm" role="form" action="#">
    <div class="well" style="margin-left:20px; margin-right:20px">
        <div class="row" style="margin-left:5px; margin-right:5px">
            <div class="col-lg-12">
                <h4 style="color:darkblue">What type of project do you require?</h4>
            </div>
        </div>
        <br>
        <div class="row" style="margin-left:5px; margin-right:5px">
            <div class="col-md-6 col-lg-6">
                <select name="drop1" class="form-control" ng-model="project.match1"> 
                    <option value="">-- Select Category --</option>
                    <option ng-repeat="items in serviceCategory" value="{{items.ServiceCategoryId}}">{{items.ServiceCategoryName}}</option>
                </select>
            </div>
            <div class="col-md-6 col-lg-6">
                <select class="form-control" ng-model="project.match2" name="drop2">
                    <option value="">-- Select Sub Category --</option>
                    <option ng-repeat="a in service" ng-if="a.ServiceCategoryId==project.match1">
                        {{a.ServiceName}}
                    </option>
                </select>
            </div>
        </div>
        <br>
        <div class="row" style="margin-left:5px; margin-right:5px">
            <div class="col-md-12 col-lg-12">
                <textarea ng-model="project.ServiceCategories" placeholder="Add Service Categories here" rows="3" style="resize:none; width:100%"></textarea>
            </div>
        </div>
    </div>

    <div class="well" style="margin-left:20px; margin-right:20px">
        <div class="row" style="margin-left:5px; margin-right:5px">
            <div class="col-md-12 col-lg-12 text-left">
                <h4 style="color:darkblue">What is your Project about</h4>
            </div>
        </div>
        <br>
        <div class="row" style="margin-left:5px; margin-right:5px">
            <div class="col-md-12 col-lg-12 text-left">
                Describe your Project<br>
            </div>
        </div>
        <div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
            <div class="col-md-12 col-lg-12">
                <input type="text" ng-model="project.DescribeProject" style="width:100%">
            </div>
        </div>
        <br>
        <div class="row" style="margin-left:5px; margin-right:5px">
            <div class="col-md-6 col-lg-6">
                What is your Project about?
            </div>
            <div class="col-md-6 col-lg-6">

            </div>
        </div>

        <div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
            <div class="col-md-12 col-lg-12">
                <textarea ng-model="project.AboutProject" ng-trim="false" rows="3" cols="70" ng-maxlength="5000" style="resize:none; width:100%;"></textarea>
            </div>
        </div>
        <br>
        <div class="row" style="margin-left:5px; margin-right:5px">
            <div class="col-md-12 col-lg-12">
                Attach files
            </div>
        </div>
        <div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
            <div class="col-md-12 col-lg-12">
                <!--attach file code-->
                <div style="height:30px; width:100%;">
                </div>
            </div>
        </div>
        <div class="row" style="margin-bottom:15px; margin-left:5px; margin-right:5px">
            <div class="col-md-1 col-lg-1"></div>
            <div class="col-md-10 col-lg-10">
                <div class="text-right">
                    <button class="btn btn-default btn-primary" type="submit" ng-click="showData(project)">Post Project</button>
                    <button class="btn btn-default" data-dismiss="modal" aria-label="Close" style="color:black; border-color: #2e6da4">Close</button>
                </div>
            </div>
            <div class="col-md-1 col-lg-1"></div>
        </div>
    </div>
</form>

脚本是

var app = angular.module("MyApp", []);
    app.controller('MainCtrl', function ($scope, $http) {
       $http.get('/JsonData/ServiceCategory.json').success(function (response) {
           console.log("Service Category Connected");
           $scope.serviceCategory = response;
        });
        $http.get('/JsonData/Service.json').success(function (res) {
           console.log("Service Connected");
            $scope.service = res;
        });
        $scope.showData = function (inputData) {
            var Project = new Object();
            Project.Category = inputData.match1;
            Project.SubCategory = inputData.match2;
            Project.ServiceCategories = inputData.ServiceCategories;
            Project.Description = inputData.DescribeProject;
            Project.AboutProject = inputData.AboutProject;
            var ProjectJson = JSON.stringify(Project);
            alert(ProjectJson);                
        }
    });