validation using ng-class not working

Question

In my application until all the mandatory fields are filled the update billing button doesn't get enabled. Here i have used ng-class for this validation. But rather than the button remain disabled until i fill mandatory field, it shows the error message as "message webpage: [object] [Object]" Any help?

  @if (HttpContext.Current.Session["RoleID"].ToString() == "3")
                                                {
                                                    <div class="form-horizontal">
                                                        <div class="form-group">
                                                            <label class="control-label col-lg-2 pull-left">Quality<span class="Imp">*</span></label>
                                                            <div class="col-lg-8">

                                                                <select id="Quality" disabled="disabled" name="Quality" class="form-control" style="width:170px" tooltip="Quality is required"
                                                                        tooltip-placement="top" tooltip-trigger="mouseenter">
                                                                    <option value="default">Choose here</option>
                                                                    <option value="Satisfactory">Satisfactory</option>
                                                                    <option value="NotSatisfactory">Not Satisfactory</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }

                                                else
                                                {
                                                    <div class="form-horizontal" ng-class="{'has-error':EditOCBForm.Quality.$invalid &&
                                                  EditOCBForm.Cycle.$dirty}">
                                                        <div class="form-group">
                                                            <label class="control-label col-lg-2 pull-left">Quality<span class="Imp">*</span></label>
                                                            <div class="col-lg-8">
                                                                <select id="Quality" name="Quality" class="form-control" style="width:170px" ng-model="vm.EditRef_OCBUI.Quality" tooltip="Quality is required"
                                                                        tooltip-placement="top" tooltip-trigger="mouseenter" required="required">
                                                                    <option value="Satisfactory">Satisfactory</option>
                                                                    <option value="NotSatisfactory">Not Satisfactory</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }

button code:

<button type="button" class="btn btn-primary" data-dismiss="modal" data-ng-click="Edit()" ng-disabled="EditOCBForm.$invalid" id="ticketEditbtn">Update Billing</button>

Answer 1

You have missed required tag in 1st input

 <select id="Quality" disabled="disabled" name="Quality" class="form-control" 
     style="width:170px" tooltip="Quality is required" tooltip-placement="top" tooltip-trigger="mouseenter" required >

       <option value="default">Choose here</option>
       <option value="Satisfactory">Satisfactory</option>
      <option value="NotSatisfactory">Not Satisfactory</option>

</select>