select(required): asterisk shows on value and label when using custom validations

[rdantonio]

Bug, enhancement request, or proposal:

If an md-select control has a custom validation on it using $setValidity(false), the required * will show on the chosen value even though the value is populated.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue: https://codepen.io/anon/pen/OEypbo

Detailed Reproduction Steps:

1. Using the above codepen
2. Populate the Favorite Color field with a value
3. Click the clear button (note the setValidity added in the clear function)
4. Populate the Favorite Color field again
5. Note that the * appears on both the label and the value

What is the expected behavior?

The * should only appear on the label, not the value

What is the current behavior?

The * appears on both the label and the value

What is the use-case or motivation for changing an existing behavior?

Minor UI/UX fix since the extra * might be confusing to end users.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.5.8
• AngularJS Material: 1.1.9
• OS: All
• Browsers: All

Is there anything else we should know? Stack Traces, Screenshots, etc.

I believe it has to do with this selector in components/select/select.scss:

md-input-container:not(.md-input-has-value) {
  md-select[required]:not(.md-no-asterisk), md-select.ng-required:not(.md-no-asterisk) {
    .md-select-value span:first-child:after {
      content: ' *';
      font-size: 13px;
      vertical-align: top;
    }
  }
}

being overridden later in the file by a similar rule without the md-input-container:not(.md-input-has-value)

Since the second rule isn't checking for the value it is assuming any invalid state is "required", which doesn't work if a custom validation is used.