KendoUI+AngularJS : Showing dropdown list for an inline editor in a hierarchical nested grid

Question

I am having a hierarchical nested Kendo grid. The parent grid is displaying a list of currency and each currency has a list of allocation. Both grid have a inline editor. Currency has a property 'currencyName' and allocation has a property 'allocationName'. Both these property need to have a kendo dropdownlist editor.

In my solution, I am able to get the drop down for the currencyName, but for allocationName I am getting a textbox. Below is the code:

HTML :

<div kendo-grid="ctrl.currencyKendoGrid" style="margin-top: 2em" k-options="ctrl.currencyGridOptions"></div>

Currency Grid DataSource: This is being assigned by another parent funds grid. The funds grid has an editable pop-up window, and assigns the currencyKendoGrid it's data source on the edit event as follows.

edit: function (e) {
            if (e.model.currencies)
                ctrl.currencyKendoGrid.dataSource.data(e.model.currencies);
      }

Currency DropDown DataSource:

ctrl.currencyDataSource = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: function (e) {
                DataSvc.getCurrencyData().then(function (response) {
                    e.success(response.data);
                });
            }
        }
    });

Allocation DropDown DataSource:

ctrl.allocationsList = [{ allocName: "Cash", allocId: 1 }, { allocName: "Money Market", allocId: 2 }, { allocName: "TBill", allocId: 3 }, { allocName: "FX-Forward", allocId: 4 }];
    ctrl.allocationDataSource = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: function (e) {
                e.success(ctrl.allocationsList);
            }
        }
    });

Currency Grid Options:

ctrl.currencyGridOptions = {
        dataSource: {
            schema: {
                model: {
                    fields: {
                        currency: { type: "string", editable: true }
                    }
                }
            }
        },
        editable: "inline",
        toolbar: [{
            name: 'create',
            text: 'Add Currency',
        }],
        columns: [
            {
                field: "currencyName", title: "Currency",
                editor: function (container, options) {
                    $('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.currencyDataSource" data-bind="value:' + options.field + '"/>')
                    .appendTo(container);
                }
            },
            { command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: "&nbsp;", width: "250px" }
        ],
        detailInit: detailInitCurrency,
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
    }

Allocation Grid Options:

function detailInitCurrency(e) {
        if (e.data.allocations)
            ctrl.selectedCurrencyAllocations = e.data.allocations;

        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                transport: {
                    read: function (e) {
                        e.success(ctrl.selectedCurrencyAllocations);
                    },
                },
                filter: { field: "currencyId", operator: "eq", value: e.data.currencyId },
                schema: {
                    model: {
                        id: "allocationId",
                        fields: {
                            allocationId: { type: "number", editable: false },
                            allocationName: { type: "string", editable: true },
                        }
                    }
                }
            },
            editable: "inline",
            toolbar: [{
                name: 'create',
                text: 'Add Allocation',
            }],
            columns: [
                {
                    field: "allocationName", title: "Allocation",
                    editor: function (container, options) {
                        $('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.allocationDataSource" data-bind="value:' + options.field + '"/>')
                        .appendTo(container);
                    }
                },
                { command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: "", width: "250px" }
            ]
        });
    }

Output :

Please feel free to point me out on any code that I may have missed since I have removed a lot of unnecessary code for keeping the problem simple.