There is strange behaviour with radiobuttons and data-type in Chrome.

[Krugloff]

Hello,
I found a strange behaviour for radiobuttons with data-type attribute in Chromium (I tested on Chromium 50.0.2661.94). Radiobuttons broken when input has data-type attribute at the first.

I load angular demo for input[radio] and create example (try to choose "Red").
https://plnkr.co/edit/uB05HUiCf4LDMyi6ZZtN?p=preview

It is working in Firefox but don't working in Chrome.

If you try move data-type to end it fixed a problem. If you try to add name it choose radiobutton, but model not changes.

[gkalpak]

This happens because of how Angular denormalizes attributes and applies directives (as explained in the dev guide). So, basically, data-type is denormalized as type and stores on $attrs, where we later access $attrs.type to determine the type of the input directive.

So the order of type vs data-type determines which overwrites the other and determines the actual behavior.

The difference in behavior between Chrome and Firefox is due to the way they order and traverse attributes. This is explained in #13126 (comment).

tl;dr

• Chrome iterates over attributes in order of appearance.
• Firefox iterates over attributes in reverse order of appearance, but special-cases some of them putting at the end (thus accessing them first while iterating over attributes).

The obvious fix would be reading the type off of element.attr('type'), but I wonder (a) what this might break (possibly nothing) and (b) what the performance impact would be (e.g. on a view with a table of several repeated rows with inputs).

Another approach would be making unprefixed attributes take precedence in $attrs (e.g. type would overwrite data-type regardless of their respective order), but this can be a broader (and harder to predict) breaking change. I think it's not worth it.