What are the reasons for ng-disabled not to work when used in a button

Question

I have a Angular form where i am doing validation. And i want the form to be not submit-able if any required fields are empty and validation fails. The form give bellow.

<form name="userForm" novalidate>
    <fieldset ng-disabled="data.externalUserDisable">
        <div class="restrictwidth">
            <h1 ng-if="data.urlId === 'new'" translate>NewUser</h1>
            <div class="form-group required" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
                <label class="control-label" translate>UsernameEmail</label>
                <input class="form-control" type="email" id="username" name="username" ng-model="user.Username" ng-model-options="{'update On': 'blur'}" ng-disabled="(!data._editMode && !(user.Status === 'NotVerified' || user.Status === 'ActivationPending'))" ng-maxlength="256" required>
                <div class="error-messages" ng-messages="userForm.username.$error" ng-if="userForm.$submitted || !userForm.username.$pristine">
                    <div ng-message="required" class="help-block error-message"><span translate="UsernameRequired"></span></div>
                </div>
            </div>
            <div class="row">
                <div class="form-group required col-sm-6" ng-class="{ 'has-error' : userForm.firstName.$invalid && !userForm.firstName.$pristine }">
                    <label class="control-label" translate>FirstName</label>
                    <input class="form-control" type="text" id="firstName" name="firstName" ng-model="user.FirstName" ng-maxlength="64" required>
                    <div class="error-messages" ng-messages="userForm.firstName.$error" ng-if="userForm.$submitted || !userForm.firstName.$pristine">
                        <div ng-message="maxlength" class="help-block error-message"><span translate="FirstNameLength"></span></div>
                        <div ng-message="required" class="help-block error-message"><span translate="FirstNameRequired"></span></div>
                    </div>
                </div>
                <div class="form-group required col-sm-6" ng-class="{ 'has-error' : userForm.lastName.$invalid && !userForm.lastName.$pristine }">
                    <label class="control-label" translate>LastName</label>
                    <input class="form-control" type="text" id="lastName" name="lastName" ng-model="user.LastName" ng-maxlength="64" required>
                    <div class="error-messages" ng-messages="userForm.lastName.$error" ng-if="userForm.$submitted || !userForm.lastName.$pristine">
                        <div ng-message="maxlength" class="help-block error-message"><span translate="LastNameLength"></span></div>
                        <div ng-message="required" class="help-block error-message"><span translate="LastNameRequired"></span></div>
                    </div>
                </div>
            </div>               
            <div class="form-group required" ng-class="{ 'has-error' : userForm.masterEngagement.$invalid && !userForm.masterEngagement.$pristine }">
                <label class="control-label" translate>MasterEngagement</label><i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
                <input type="text" name="masterEngagement" ng-model="user.MasterEngagementId" ng-if="!data.externalUserDisable" typeahead="engagement.EngagementId as engagement.EngagementName for engagement in getLocation($viewValue)" typeahead-on-select='onSelect($item, $model, $label)'
                       typeahead-loading="loadingLocations" typeahead-editable="false" typeahead-input-formatter="formatLabel($model)" typeahead-template-url="customTemplate.html" typeahead-wait-ms="500" class="form-control" ng-disabled="singleEngagementAdmin !== '0'" required>
                <input type="text" name="masterEngagement" ng-model="user.MasterEngagementName" ng-if="data.externalUserDisable" class="form-control" ng-disabled="singleEngagementAdmin !== '0'" required>
            </div>

            ...

            <div class="restrictwidth">
                <button ng-if="data.urlId === 'new'" type="submit" class="btn btn-primary btn-lg pull-right ladda-button" data-style="expand-left" ng-save-in-progress ng-disabled="{{ userForm.$invalid }}" ng-click="insert()" translate>Save</button>
                <button ng-if="data.urlId !== 'new'" type="submit" class="btn btn-primary btn-lg pull-right ladda-button" data-style="expand-left" ng-save-in-progress ng-disabled="userForm.$invalid || (!superUser && user.Superuser)" ng-click="update()"><span class="ladda-label" translate>Update</span></button>                 
                <a class="btn btn-link pull-left" ng-click="back()" type="button"><span class="ladda-label" translate>Cancel</span></a>
            </div>
        </div>
    </fieldset>
</form>

The use of ng-disabled to disable the save button is correct. But the button is not disabled. The button is not disabled when the form loads and even for the validation errors the button is not disabled.

I have checked the userForm object and the $invalid value is true and $valid valus is false.

What i would like to know is what are the reasons for this to happen.? What could be the possible causes?

Update

The output form printing the userForm..

{
  "$error": {
    "required": [
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "username",
        "$options": {
          "update On": "blur",
          "updateOnDefault": true
        }
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "firstName",
        "$options": null
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "lastName",
        "$options": null
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "masterEngagement",
        "$options": null
      }
    ]
  },
  "$name": "userForm",
  "$dirty": false,
  "$pristine": true,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "username": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "username",
    "$options": {
      "update On": "blur",
      "updateOnDefault": true
    }
  },
  "firstName": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "firstName",
    "$options": null
  },
  "lastName": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "lastName",
    "$options": null
  },
  "title": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "title",
    "$options": null
  },
  "employeeNumber": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "employeeNumber",
    "$options": null
  },
  "userInfo": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "userInfo",
    "$options": null
  },
  "timeZone": {
    "$viewValue": "W. Europe Standard Time",
    "$modelValue": "W. Europe Standard Time",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "timeZone",
    "$options": null
  },
  "culture": {
    "$viewValue": "en-US",
    "$modelValue": "en-US",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "culture",
    "$options": null
  },
  "policy": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [],
    "$viewChangeListeners": [
      null
    ],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "policy",
    "$options": null
  },
  "masterEngagement": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "masterEngagement",
    "$options": null
  }
}

Answer 1

Actually everything works fine for button tag, check this demo: http://plnkr.co/edit/fJoq7RLrDNYMxYwh6bPq?p=preview

The issue in your case is the ng-if directive which creates an inner scope, but form is declared in the parent scope. And in this case, to disable the button based on the form you have, you need to access it from parent. Simplified it would be like this:

<button type="submit" ng-disabled="$parent.userForm.$invalid">Save</button>

Edit: Having two ng-if means you have to go up with two parent scopes in this case, in the original code, having one ng-if access to invalid property is via $parent.userForm.$invalid, with two ng-if is

<button type="submit" ng-if="data.urlId === 'new'" ng-disabled="$parent.$parent.userForm.$invalid">Save</button>

This can be avoided by using ng-show or ng-hide instead of ng-if, the difference is that the first two don't create inner scopes, while each ng-if will create its scope inside its parent. If you change both ng-if into ng-show, then the button will work with your original ng-disabled="userForm.$invalid".