<div>
  <div class="form-group">
    <label class="col-sm-5 control-label" for="manufacturer-name">Enter the manufacturer name</label>
    <div class="col-sm-7">
      <!-- <ui-select ng-model="device.db.brand" theme="bootstrap">
        <ui-select-match placeholder="Select or search a brand in the list...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="brand in brands | filter: $select.search">
          <span ng-bind-html="brand | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select> -->
      <select name="deviceBrand" id="" ng-model="device.db.brand" ng-options="brand for brand in brands" required></select>
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-5 control-label" for="device-model-name">Enter a model to search for it</label>
    <div class="col-sm-7">
      <div class="input-group">
        <input type="text" class="form-control" id="device-model-name" placeholder="Model name or number" ng-model="query" result="models" db-type="device.db.type" brand="device.db.brand" query="query" event="keypress" search-models>
        <span class="input-group-btn">
          <button class="btn btn-default btn-search" type="button" result="models" db-type="device.db.type" brand="device.db.brand" query="query" event="click" search-models><i class="fa fa-search"></i></button>
        </span>
      </div>
    </div>
  </div>

  <div class="fx-fade-down" ng-if="models.ip.length || models.ir.length">
    <div class="form-group">
      <label class="col-sm-5 control-label" for="">Select how the device will be controlled</label>
      
      <div class="col-sm-7">
        <label class="radio-inline">
          <input type="radio" name="targetType" ng-model="device.target.type" ng-disabled="models.ir.length === 0" ng-value="1"> IR controlled
        </label>

        <label class="radio-inline">
          <input type="radio" name="targetType" ng-model="device.target.type" ng-disabled="models.ip.length === 0" ng-value="2"> Network controlled
        </label>
      </div>
    </div>


    <div class="form-group" ng-if="device.target.type">
      <label class="col-sm-5 control-label" for="">These models were found matching your search</label>
      <div class="col-sm-7">
        <div class="select-style" ng-if="device.target.type === 1 && models.ir.length">
          <select size="9" ng-options="model as model.name for model in models.ir" ng-model="device.db.model" required>

          </select>
        </div>

        <div class="select-style" ng-if="device.target.type === 2 && models.ip.length">
          <select size="9" ng-options="model as model.name for model in models.ip" ng-model="device.db.model" required>

          </select>
        </div>
      </div>
    </div>
  </div>
</div>