How to update form input with bootstrap dropdown using Angular

Question

I try to use uib-dropdown to update the form. When the user select from dropdown, it should popup in text box. There seems wouldn't be a problem if the text box didn't have its own model.

The form already has its own model (vm.formData.categery) to use POST to database. I need the text input, because if the category isn't available to select, they can created a new category.

The question is how to do that? There's no problem at all if using <select> and <option>

<input type="text" id="category" name="category" ng-model="vm.formData.category" class="form-control">
    <div class="btn-group" uib-dropdown>
      <button class="btn btn-default" uib-dropdown-toggle type="button" id="category">Category
      <span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
          <li><a ng-repeat="cat in vm.data.cat" ng-click="vm.addModel(cat.category)">{{cat.category}}</a></li>
      </ul>
    </div>

JS

vm.addModel = function (select) {
        vm.formData.category = select;
};

I also try to use ng-change to update the model but that doesn't seem to work.

Answer 1

Use ng-options and ng-change event,

 <select ng-model="selected" ng-change="addModel(selected)"  ng-options="cat as cat for cat in vm.data.cat">
 </select>