I am trying to create dynamic menu options within the Masonry layout and can't seem to get it to work. (JET 7.2.0)
The oj-bind-text works outside of the menu:

However, inside the menu the oj-options are repeating the first iteration:

HTML Code:
<oj-masonry-layout id="masonryLayout">
<oj-bind-for-each data="[[tableprovider]]" as ="tables">
<template>
<div :class="[[tables.data.sizeClass + ' oj-panel demo-tile']]">
<oj-bind-text value="[[tables.data.name]]"></oj-bind-text>
<oj-menu-button id="[[tables.data.menuId]]" chroming="half" display="icons">
<span slot="startIcon" class="fa fa-cogs"></span>
<span data-bind="text:[[tables.data.menuId]]"></span><!-- THE menuId STILL WORKS HERE-->
<!-- ISSUE SEEMS TO BE ONCE WE GET INSIDE THE MENU -->
<oj-menu id="button_"+"[[tables.data.menuId]]" slot="menu" style="display:none" display="dropDown" on-oj-action="[[callAction]]">
<oj-bind-text value="[[tables.data.menuId]]"></oj-bind-text><!-- WE ARE NOW STUCK ON THE FIRST ITERATION -->
<!-- FOR EACH INSIDE OF MENU / THIS ONE DOES NOT WORK-->
<oj-bind-for-each data="[[tables.data.menuOptions]]">
<template>
<oj-option id="[[$current.data.menuName]]" value="[[$current.data.menuValue]]" disabled=false>
<oj-bind-text value="[[$current.data.menuName]]"></oj-bind-text>
</oj-option>
</template>
</oj-bind-for-each>
</oj-menu>
</oj-menu-button>
<!-- FOR EACH OUTSIDE OF MENU / THIS ONE WORKS -->
<oj-bind-for-each data="[[tables.data.menuOptions]]" as="menuOptions">
<template>
<br><br>
<oj-bind-text value="[[menuOptions.data.menuName]]"></oj-bind-text>
<br>
</template>
</oj-bind-for-each>
</div>
</template>
</oj-bind-for-each>
</oj-masonry-layout>
JS Code:
var tables = [
{
name: app.getUiString('TABLE_1'),
sizeClass: 'oj-masonrylayout-tile-1x1',
menuId: 'menuId_Table_1',
menuOptions: [{menuName: app.getUiString('MENU_1_OPTION_1'),
menuValue: 'Menu_1_option_1'},
{menuName: app.getUiString('MENU_1_OPTION_2'),
menuValue: 'Menu_1_option_2'}]
}, {
name: app.getUiString('TABLE_2'),
sizeClass: 'oj-masonrylayout-tile-1x1',
menuId: 'menuId_Table_2',
menuOptions: [{menuName: app.getUiString('MENU_2_OPTION_1'),
menuValue: 'Menu_2_option_1'}]
}, {
name: app.getUiString('TABLE_3'),
sizeClass: 'oj-masonrylayout-tile-1x1',
menuId: 'menuId_Table_3',
menuOptions: [{menuName: app.getUiString('MENU_3_OPTION_1'),
menuValue: 'Menu_3_option_1'}]
}];
this.tableprovider = new ArrayDataProvider(tables, { keyAttributes: 'name'});
Any assistance would be greatly appreciated!!