Почему выберите меню $ invalid всегда true?

У меня есть HTML:

<form name="form">
     <select name="gender" ng-model="model" ng-required="true"
      ng-model-options="{ updateOn: 'mousedown blur'}">
          <option value="" disabled>--Select--</option> 
          <option value="Male">Male</option> 
          <option value="Female">Female</option> 
     </select>
</form>

<form-error element="gender"><p>Please select Gender</p></form-error>

Я использую angularJS javascript в директиве

.directive('formError', function() {
    'use strict';
     return {
        require: ['^form'],
        restrict: 'E',
        templateUrl: '/partials/form-fields/validations/error.html',
        scope: {},
        transclude: true,
        replace: true,
        link: function($scope, $element, $attr, form) {
            var element = $attr.element;

            $scope.form = form[0];

            $scope.$watch('form.' + element + '.$viewValue', function(newVal, oldVal){
            $scope.$dirty = $scope.form[element].$dirty;
            $scope.$valid = $scope.form[element].$valid;
            $scope.$invalid = $scope.form[element].$invalid;
            $scope.$value = newVal;

            console.log($scope.form.gender.$invalid);
         }, true);

         $scope.$watch('form.$submitted', function(newVal, oldVal){
             $scope.$submitted = newVal;
         }, true);
    }
});

Директива выше ссылок на эту html-страницу ниже

 <div class="input__error"
      ng-if="($dirty && $invalid && $value !== '') || ($submitted && $invalid)"
      ng-transclude></div>

Входной текст $ недействителен с true на false, когда я набираю текст, но в меню выбора, я выбрал Мужской, но он по-прежнему будет иметь значение true для $ недействительным. Я выбрал "Женщина", тогда он станет ложным для $ недействительным.

В принципе, если я выбираю Male, ошибка должна исчезнуть.

Любые идеи, почему? благодаря