Auto Complete Disabled Dropdown Item

Auto complete Control depends on another control and disabled items in drop down list

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.138/styles/wijmo.min.css">
<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.input.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.3.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="appController">
            <wj-auto-complete placeholder="Cities"
                              items-source="cities"
                              display-member-path="Name"
                              selected-value-path="Name"
     
                              selected-value="SelectedCity"
                              >
            </wj-auto-complete>           
        </div>
    </div>

CSS

.wj-listbox-item{
            padding:0;
        }

        .enable-items{
            text-align:left;
            border:none;
            background-color:transparent;
            width:100%;
            height:100%;
            margin:0;
            padding: 3px 10px;
        }

        .disable-items{
            color:grey;
            text-align:left;
            border:none;
            background-color:transparent;
            width:100%;
            height:100%;
            margin:0;
            padding: 3px 10px;
        }

JavaScript

var _CITIES = [{ Name: 'Chennai', isCapital: false, isMetro: true },
                       { Name: 'New Delhi', isCapital:true, isMetro: true },
                       { Name: 'Kolkata', isCapital: false, isMetro: true },
                       { Name: 'Agra', isCapital: false, isMetro: false },
                       { Name: 'Mumbai', isCapital: false, isMetro: true },
                       { Name: 'Bangalore', isCapital: false, isMetro: true },                       
                       { Name: 'Kanpur', isCapital: false, isMetro: false }];
        
        var app = angular.module('myApp', ['wj']);
        app.controller('appController', function ($scope) {
            $scope.SelectedCity = null;
            $scope.cities = new wijmo.collections.CollectionView(_CITIES);
            $scope.typeIndex = 0;
            $scope.itemChanged = function () {
                $scope.SelectedCity = null;
                $scope.dropDownItemFormatter = customItemFormatter.bind(this);
            };
           
            function customItemFormatter(index, content) {
                for (var i = 0; i < _CITIES.length; i++) {
                    if (_CITIES[i].Name == content) {
                        cityIndex = i;
                        break;
                    }
                }
                if ($scope.typeIndex == 0) {
                    content = '<button class="enable-items">' + content + '</button>';
                }
                if ($scope.typeIndex == 1) {
                    if (!_CITIES[cityIndex].isCapital ) {
                        
                        content = '<button class="disable-items" disabled>' + content + '</button>';
                    }
                    else {
                        content = '<button class="enable-items">' + content + '</button>';
                    }
                }
                if ($scope.typeIndex == 2) {
                    if (!_CITIES[cityIndex].isMetro) {
                        content =...