Beware of the empty tag

I started playing with AngularJS lately and made some progress with RHQ as backend data source (via the REST api). Now I wanted to write a custom directive and use it like this:

    <rhq-resource-picker/>
    <div id="graph" style="padding: 10px"></div>

Now the very odd thing (for me) was that in the DOM this looked like this:

    <rhq-resource-picker>
       <div id="graph" style="padding: 10px"></div>
    </rhq-resource-picker>

My custom directive wrapped around the <div> tag.

To fix this I had to turn my tag in a series of opening and closing tags instead of the empty one:

    <rhq-resource-picker></rhq-resource-picker>
    <div id="graph" style="padding: 10px"></div>

And in fact it turns out that a few more tags like the popular <div> tag show the same property of not allowing to write an empty tag, but requiring a tag pair.