Angular nesting custom directives

Can any one help me in understanding how the following custom directives can interact with each other.

<div sidebarContainer>
<div sidebarContent>

<div sidebarContainer>
<div sidebarContent></div>
<div sidebar></div>
</div>

</div>
<div sidebar></div>
</div>

I have seen such code, these three directives construct content with a side bar. This setup for example can set the sidebarContent left-margin to the sidebar width. as you can see we can also place another sidebarContainer inside another sidebarContent.

How does this work, like nesting directives that can recognize each other