How to dynamically create a menu bar based on JSON using Angular Material?
<p>I am trying to create a menu bar recursively using <a href="https://material.angularjs.org/latest/demo/menuBar" rel="noreferrer">Angular Material Menu Bar directive</a>, but the result is not being as expected. The best solution I have so far is to create a directive and call it recursively, like shown here: <a href="https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA" rel="noreferrer">https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA</a>. Notice that there are two menu bars in this Plunker. The first is created with my recursive structure from a JSON and the second is written directly on the template. The problem with my solution happens when there are nested menus like "Lorem -> Dolor -> ...", as the nested menus are not being aligned correctly.</p>

<p>Inspecting the generated code on Chrome, I notice that the nested menu in the second menu bar (written directly on template) has some properties regarding its nest state:</p>

<pre><code>&lt;md-menu md-position-mode="cascade" 
    class="md-nested-menu md-menu ng-scope"
    md-nest-level="1"&gt;
...
&lt;/md-menu&gt;
</code></pre>

<p>while the same menu in the first menu bar doesn't:</p>

<pre><code>&lt;md-menu ng-if="ctrl.isCompoundedMenuItem()" class="md-menu ng-scope"&gt;
...
&lt;/md-menu&gt;
</code></pre>

<p>What can I do to fix this?</p>

<hr>

<p>Just adding an information: I have already tried an approach <a href="http://benfoster.io/blog/angularjs-recursive-templates" rel="noreferrer">using <code>ng-include</code></a> to create the menu bar, but the result was terribly worse.</p>