<h4 class="bg-primary">Advanced Device Model</h4>
<p>Choose the model name or number of the device.</p>

<p>Device type is: <strong class="text-primary">{{device.category.name}}</strong></p>
<p>Labeled: <strong class="text-primary">{{device.name}}</strong></p>
<p>Manufacturer: <strong class="text-primary">{{device.brand.name}}</strong></p>

<div class="form-group">

  <label for="device-model">Select a model:</label>
  <ui-select ng-model="device.model" theme="bootstrap">
    <ui-select-match placeholder="Choose a model">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="model in models | filter: $select.search">
      <span ng-bind-html="model.name | highlight: $select.search"></span>
    </ui-select-choices>
  </ui-select>

</div>

<div class="left-and-right">
  <go-back state="menu.programming.add-advanced-device.more-device-name"></go-back>
  <button class="btn btn-primary btn-next" ng-disabled="!device.model" ng-click="doNext()">Next</button>
</div>
