Wijmo 5 - ComboBox, AutoComplete, ListBox

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h3>Select category:</h3>

<div ng-repeat="option in field.options">
  <input type="{{field.type}}" ng-model="defaultValue" name="radio" value="{{option.value}}" ng-readonly="!isEnabled" ng-click="populateAutocomplete(option.value)">
  <label>{{option.value}}</label>
</div>
    
    <wj-combo-box ng-hide="hideAutoComplete" ng-disabled="false" required="false" text="firstCountry" items-source="comboSource" is-editable="true" placeholder="{{defaultValue.placeholder}}" selected-index="selectedIndex"></wj-combo-box>

</div>

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

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

    $scope.field =   {
    "id": "1",
    "type": "radio",
    "options": [
      {
        "id": "1" ,
        "value": "Restaurants",
        "placeholder": "Select a restaurant"
      },
      {
        "id": "2",
        "value": "Bars",
        "placeholder": "Select a bar"
      },
      {
        "id": "3",
        "value": "Hotels",
        "placeholder": "Select a hotel"
      },
      {
        "id": "4",
        "value": "Shopping Malls",
        "placeholder": "Select a mall"
      }
    ]
  };
    $scope.hideAutoComplete = true;
    $scope.populateAutocomplete = function (value) {
        $scope.selectedIndex = -1;
        $scope.hideAutoComplete = false;
        if(value === 'Restaurants') {
         $scope.defaultValue = $scope.field.options[0];
         $scope.comboSource = $scope.Restaurants;
        }
        if(value === 'Bars') {
         $scope.defaultValue = $scope.field.options[1];
         $scope.comboSource = $scope.Bars;
         
        }
        if(value === 'Hotels') {
         $scope.defaultValue = $scope.field.options[2];  
         $scope.comboSource = $scope.Hotels;
        }
        if(value === 'Shopping Malls') {
         $scope.defaultValue = $scope.field.options[3];
         $scope.comboSource = $scope.Malls;
        }
    };
    
  $scope.Restaurants = ['Burger de Ville', 'Gibbys', 'Marvens', 'Tri Express'];
  $scope.Bars = ['Scoop', 'Le Lab', 'La Distillerie No 1'];
  $scope.Hotels = ['Omni Mont-Royal', 'Ritz-Carlton', 'Le Crystal', 'Sheraton'];
  $scope.Malls = ['Eaton Center', 'Mall Champlain', 'Rockland', 'Complexe Desjardins'];
});