[AngularJS] 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 <https://plnkr.co/edit/292EfDBv0U22kTKZhdUR?p=preview>
in a better form

Regards
Sander