[BUG] Wrapping nested <select> with a <div> in a Form makes its Control not be bind anymore

[farolfo]

I'm doing a kind of select2 but with much less functionality and we want the form that is above to know about this Control (so we can use $dirty and $invalid).
But I've noted that if you wrap the select that is in the directive's HTML with a div, the $dirty and $invalid of that control stop working. Any idea why ?

Try it out on this http://plnkr.co/edit/UV425G2SMcqRYeX2N4qw?p=preview, go to the select.html file and turn

<select class='form-control' ng-model='selectedval' ng-attr-name='{{name}}' ng-options='item as item.name for item in options' required><option value=''>-- select --</option></select>

into

<div>
  <select class='form-control' ng-model='selectedval' ng-attr-name='{{name}}' ng-options='item as item.name for item in options' required><option value=''>-- select --</option></select>
</div>

[caitp]

So your test case is actually running an old version of angular, which A) does not support the ng-attr-* directives, and B) has a broken isolate scope implementation.

This is still broken, but in different ways, using angular 1.2.15. You have a priority issue with the ng-attr-name directive, regardless of where the <select> control is, and so it gets added to the form control with the name you aren't expecting.

The reason this "works" with 1.0.8 and without wrapping it in a div, is because with replace: true in your directive, we merge the attributes from the directive's compile node (which does contain name="...") into the root node of the template, so you're sort of accidentally taking advantage of a poorly documented behaviour of the compiler, in that case.

Unfortunately, there isn't really a good way to have dynamic form control names yet (and this is really the root of the problem you're having), there are a number of PRs adding support for this, and I've written a hack to decorate the ngModel controller to make this work (although it might not work anymore, depending on if the new $interpolate api landed yet or not), you can see that at http://plnkr.co/edit/hSMzWC?p=preview

So, Matias has an alternative solution for this, it's not clear which one is going to land --- but in any case, that's about what your issue is.

In the future it would be good to ask about these on http://webchat.freenode.net/?channels=angularjs or https://groups.google.com/forum/#!forum/angular to get answers to these kinds of support questions (this is not a bug, per se, although the "issue" you're seeing might be documented better, so PRs welcome for clarifying that in the compiler docs).

[farolfo]

Thanks !! BTW do you think your proposed solution won't work due to a renaming issue after that $interpolate api change or due to a functionality that is actually changing ?
In the first case I could go with your solution for now haha

[caitp]

I'm not sure, I haven't reviewed the interpolation change. It's most likely just a minor API change, an extra parameter or something.