AngularJS element directives not displaying when using self-closing tags

Question

I have in my html file directives

<add /> <back /> 

and the directives are on the form

.directive('add', ['$window', ... 

and

.directive('back', ['$window',  

This works fine.

If i change the directives to camel case:

.directive('addPlayer', ['$window', ...  <add_player /> <back /> 

and

<add:player /> <back /> 

display fine whereas

<add-player />  regular dash <back /> 

displays only <add-player> and everything after is not displayed.

Any ideas why?

EDIT:

I've kind of gotten the same behaviour here

http://plnkr.co/edit/cpP4c2TyZwv5Y4BrNUBb?p=preview

Answer 1

To lay your question to rest, I am quoting the official statement from the AngularJS team: (sic)

self-closing or void elements as the html spec defines them are very special to the browser parser. you can't make your own, so for your custom elements you have to stick to non-void elements (<foo></foo>).

this can't be changed in angular.

- IgorMinar

^{source: https://github.com/angular/angular.js/issues/1953#issuecomment-13135021}

Follow the rest of the conversation on AngularJS issue's page where they discuss the possibility of using XHTML for delivering content with self-closing tags that is acceptable to the browser. However do note that it is not fully supported by AngularJS.