Recursion directive not working

Question

I am trying to create a custom recursion directive. But it's not working I followed the approach defined here

Recursion in Angular directives

Here is the fiddle

http://jsfiddle.net/x6kvwzuk/

Only the root menu items are present. The children are not present.

The JSON format of the menus are as shown in the fiddle.

{
   menus : [
      {
         displayName : 'somename'
         submenus : [
           // array of menu objects
         ]
      },
      {
         displayName : 'somename2'
         submenus : [
           // array of menu objects
         ]
      }
   ]
}

How to resolve this ?

Answer 1

You were close, but you needed to copy the bit that actually adds the compiled contents to the element.

compiledContents(scope, function(clone){
    iElement.append(clone);
});

http://jsfiddle.net/x6kvwzuk/1/

As an aside, it might be easier to maintain the code (and test it in isolation) if you moved all that recursion logic to a service, as described in your referenced approach. Something like this: http://jsfiddle.net/u998oxxz/1/