Angular.js: md-select not working properly with Angular 1.7.7

[Mike-Bauer]

I'm submitting a ...

• [x ] bug report
• [ ] feature request
• [ ] other

Current behavior:

Angular 1.7.7 results in a problem for the Angular Material md-select directive when the directive has the required attribute, has a parent with an ng-if, and the md-select's ng-model is given an initial value. The directive incorrectly flags a required error and the displayed select option shows a trailing asterisk.

Expected / new behavior:

The md-select should not flag a required error and the displayed selected option should not show an asterisk.

Minimal reproduction of the problem with instructions:

In Controller:

$scope.selectModel = 'option1';
$scope.showSelect = true;

In View:

<md-input-container ng-if='showSelect'>
  <label> Select </label>
  <md-select ng-model='selectModel' required>
    <md-option value='option1'> Option 1 </md-option>
    <md-option value='option2'> Option 2 </md-option>
  </md-select>
</md-input-container>

AngularJS version: 1.7.7

AngularJS Material version: 1.1.12

Browser: Chrome 71.0.3578.98 | Firefox 64.0.2 | Edge 42.17134.1.0

Anything else:

[Narretz]

It works for me:
http://plnkr.co/edit/dP3Y4oTsbQoQ44tfqj7x?p=preview

Please provide a runnable demo, code and screenshots alone are not enough.
The example code is also incorrect: the label element is not closed.

[jmkrimm]

The issue appears when you add an ng-if to the md-input-container.

[Mike-Bauer]

Correct, the issue does appear when you add an ng-if to the md-input-container or to a parent div as shown in this example.

http://plnkr.co/edit/71Gc7SshCFraulg5tbpx?p=preview

[Splaktar]

Just in case it wasn't clear, this works fine with AngularJS 1.7.6 (demo).

This appears to have been caused by https://github.com/angular/angular.js/commit/005dd97255840547f0c11f4cd0ee9ec126ad1325.

[kambleaa007]

works in older version 1.7.6 causing problem in version 1.7.7
any updates on #005dd97 https://github.com/angular/angular.js/commit/005dd97255840547f0c11f4cd0ee9ec126ad1325

[Narretz]

I'm working on a fix but in the mean time using NG-required=“true“ instead of plain required should work.

[jmkrimm]

Oddly enough using required="true" also works.

[Narretz]

Yes, that is because we considered the value of the required attribute for the requirement status. However the presence of required already means that the control is required.