Chaining directive within directive in angularjs

Question

I wished to create something like the following using custom directive. I am able to get the "Categories" section, but not the "breadcrumb" part.

Using ng-repeat in the breadcrumb directive, does not work.

I can observe the ul of the breadcrumb but the li element are not appended to the ul.

Following is my fiddle and for some reason the code works on my side does not work on jsfiddle. But I have placed it just to give some idea.

Fiddle

<div ng-controller="sampleCtrl">
   <tree src="categories"></tree>
</div>

Tree directive calls branch on click. Branch on click calls "breadcrumb"

ng-repeat does not work here:

template: '<ul><breadcrumbnode ng-repeat="node in breadcrumbs" src="node"></breadcrumbnode></ul>'

this is never called:

template: '<li><a>{{ node }}</a></li>',

Expectation: On click of the branch node "Mattresses" (for example in fiddle), I expect to know observe a list under div with class "bread-crumb-filter".

Any pointers on what could be the possible cause of the directive not working.

Thanks in advance!

Answer 1

The third directive is not required in jsfiddle. I hooked a service on "click" event of the "branch" node and then linked the category content to the rootscope (which was my requirement). I will see in case I can tweak the fiddle with a working implementation once I get some time.