Input Control in detail View

Combo box is used in flexgrid detail

HTML

<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.input.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20161.138/styles/wijmo.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.detail.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="appCtrl">
     <wj-flex-grid
         selection-mode="Row"
            allow-dragging="Both"
            items-source="categories">
            <wj-flex-grid-column header="Name">
               <wj-flex-grid-cell-template cell-type="Cell">hello</wj-flex-grid-cell-template>
            </wj-flex-grid-column>
            <wj-flex-grid-column header="Description" >
              <wj-flex-grid-cell-template cell-type="Cell">hello</wj-flex-grid-cell-template>
            </wj-flex-grid-column>
             <wj-flex-grid-column header="xyz"></wj-flex-grid-column>
            <wj-flex-grid-detail max-height="250" detail-visibility-mode="{{detailMode}}">
              <div style="padding-left:100px;">
                <wj-combo-box items-source ="id"></wj-combo-box>
              </div>
            </wj-flex-grid-detail>
        </wj-flex-grid>
  </div>
</div>

JavaScript

// declare app module
var app = angular.module('myApp', ['wj']);


// controller
app.controller('appCtrl', function ($scope, $http, $interval) {

    // initialize detail visibility mode
    $scope.detailMode = wijmo.grid.detail.DetailVisibilityMode.ExpandSingle;
$scope.id=["1","2","3"];
    // initialize detail row FlexGrid with Northwind data, DetailProvider version
    // this is used to show how to use the FlexGridDetailProvider without a directive
    $scope.initDetailProvider = function (s, e) {
        var dp = new wijmo.grid.detail.FlexGridDetailProvider(s);
        dp.maxHeight = 350;

        // create detail cells for a given row
        dp.createDetailCell = function (row) {
            var cell = document.createElement('div');
            s.hostElement.appendChild(cell);
            var detailGrid = new wijmo.grid.FlexGrid(cell, {
                headersVisibility: wijmo.grid.HeadersVisibility.Column,
                autoGenerateColumns: false,
                itemsSource: $scope.getProducts(row.dataItem.CategoryID),
                columns: [
                    { header: 'ID', binding: 'ProductID'},
                    { header: 'Name', binding: 'ProductName'},
                    { header: 'Qty/Unit', binding: 'QuantityPerUnit'},
                    { header: 'Unit Price', binding: 'UnitPrice' },
                    { header: 'Discontinued', binding: 'Discontinued'}
            ]
            });
            cell.parentElement.removeChild(cell);
            return cell;
        };

        // remove details from items with odd CategoryID
        dp.rowHasDetail = function (row) {
            return 1==1;
        };
    }

    // ** get NorthWind data to demonstrate

    // get products for a given category
    var products = {};
    $scope.getProducts = function (categoryID) {
        var view = products[categoryID];
        if (!view) {
            view = new wijmo.collections.CollectionView($scope.products.sourceCollection);
           ...