AngularJS ui-grid Nested Column Menu - angularjs

Question

ui-grid allows for column menus but they are added one on top of the other. I need to have nested menu items (like this http://www.bootply.com/86684) but I also need to specify custom controls, like check boxes and radio buttons on the nested menu item.
So far, I've spent several hours going through the docs, searching online, and reading the ui-grid code but have not been able to come up with a solution. Looking for some pointers or guidance on how I may be able to achieve this.
Sample configuration of menu items for a column in ui-grid:
$scope.gridOptions.columnDefs = [
field: 'Column01',
menuItems: [
{
title: 'Outer Scope Alert',
icon: 'ui-grid-icon-info-circled',
shown: function() { return true; },
active: function() { return true; },
context: $scope,
action: function($event) {
this.context.blargh();
}
},
{
title: 'Grid ID',
action: function() {
alert('Grid ID: ' + this.grid.id);
}
}
]
];
Is there a way to completely overwrite the column menu template so that I can specify a nested array of menu items like so? Note also that I would like to specify a template for the individual menu items.
$scope.gridOptions.columnDefs = [
field: 'Column01',
menuItems: [
{
title: 'Menu A',
icon: 'ui-grid-icon-info-circled',
context: $scope,
menuItems: [
{
title: 'Menu A1',
icon: 'ui-grid-icon-info-circled',
template: '<li>' +
' <div class="checkbox">' +
' <label>' +
' <input type="checkbox"> Checkbox 01' +
' </label>' +
' </div>' +
' <div class="checkbox">' +
' <label>' +
' <input type="checkbox"> Checkbox 02' +
' </label>' +
' </div>' +
'</li>',
action: function($event) {
this.context.blarghA1();
}
},
{
title: 'Menu A2',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
this.context.blarghA2();
}
},
{
title: 'Menu A3',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
this.context.blarghA3();
}
}
]
},
{
title: 'Menu B',
action: function() {
alert('Grid ID: ' + this.grid.id);
}
}
]
];
Thanks!