AngularJS md-menu DYNAMIC menu items from db

[gBerger]

AngularJS md-menu DYNAMIC menu items from db

This is a dynamic menu with data from the controller. (That data is hardcoded.)

All I do is want md-menu to behave like any other menu.  MouseOver and a top level menu item and $mdMenu.open() the menu items.  Leave the menu area and ng-mouseleave="$mdMenu.close()" closes the menu.  

Once again, hover and the menu and their children appear.  Leave the menu area and disappears.

see plunker https://plnkr.co/edit/3lSEBN3Uqu2JPt5MsZwK?p=info 

Been playing with this for hours but I am unable to get the dynamic menu to work.  A hardcoded md-menu menu is no problem but this menu's values for each end-user will come from a database.

You will notice in the controller:

    angular.element(document).ready(function () {

that I included 

    $('md-menu').unwrap(); // remove first ng-repeat 

because the menu would not appear horizontal if I didn't do that.  The menu would appear vertical when this was excluded.

I know it is bad methodology (read bad) but I even tried 

    $("[ng-repeat]").replaceWith(function() { return $(this).contents(); }); 

I wasn't sure if ng-repeat was messing up md-menu items.  I've tried just about every way to make the menu act (hide/display) like every other menu.  

Any suggestions?

[Sander Elias]

Hi gBerger,

You should follow the structure of the menu more closely, and not insert div or other non-relevant tags.

Here is your plunk in a better form

Regards

Sander