Having two fields using the same model causes one to stay placeholdery

[scottybrown]

Using AngularJS I have two placeholder fields which use the same model value. This means that typing into one immediately appears in the other. But it doesn't seem to cancel the placeholder styling in the field you didn't actually type in. This means that after typing in the first field, even if you manually type into the second field, the text still appears grey. More importantly, the maxlength attribute of this field will no longer be enforced. Clearing either fields after this point doesn't help, you need to refresh the page.

[scottybrown]

I tried reimplementing this using ng-change and emit/on. So, instead of simply using the same model causing each field to have the same value, they would use separate models, use ng-change to do an emit with the new value when they are changed, and recognize that emit and apply it so they always have the same value. Unfortunately this also didn't solve the problem.

Oddly, if you hard code the value of the model using the controller it doesn't show up as a placeholder. So it is possible to set the value in the javascript rather than typing it and have it work as expected, but it doesn't work when they have the same model or using the emit approach.

[uriklar]

I have the same issue. I made a simple plunkr demonstrating this. Playing with the field value and switching the selected object causes the placeholder to dissapear and also the non placeholder text to become gray

Plunkr:
http://plnkr.co/edit/#/NAHVfhCf6RhpJHPGl7El?p=preview

Thanks! Uri