Wijmo Input Control in detail View

Combo box is used in flexgrid detail Update with new Version of Wijmo

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20161.154/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20161.154/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.154/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.154/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.154/controls/wijmo.grid.detail.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.154/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">
                        <input type="checkbox" ng-if="!detailMode.length > 0" ng-model="$item.isSelected"/>
                    </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:80px;color:red;">             
               <table>
               
               <tr><td>Name</td><td><input type="text"></td></tr>
               <tr><td>Password</td><td><input type="password"></td></tr>
              
               <tr><td>Course Year</td><td><wj-combo-box items-source="id"></wj-combo-box></td></tr>
               </table>
               
              </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 true;
        };
    }

    // ** 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);
           ...