How to implement such form functionality in Angular?

Question

Angular

There is an array:

items = [
{name: "Item1", category: "Cat1", price: 11},
{name: "Item2", category: "Cat1", price: 10},
{name: "Item3", category: "Cat2", price: 12},
];

There is a form for adding new entries to the array

<input type="text" ng-model="item.name">
<select ng-model="item.category" class="form-control">
                <option ng-repeat="category in categoryList" value="{{category}}">{{category}}</option>
            </select>
<input type="text" ng-model="item.price">
<button ng-click="addItem()">Add Item</button>
...

If I enter new data and submit the form, then a new object is added to the array. Everything seems to be clear and working.
Then I add the autocomplete directive angular-ui.github.io/bootstrap/#/typeahead to the first input

<input type="text" ng-model="item.name"  uib-typeahead="item as item.name for item in items | filter:$viewValue">

It is necessary that when an existing item is selected from the autocomplete drop-down list, then the data from the item is substituted into the category and price fields and when the form is submitted, a new object is not added to items, but the selected one is edited.
But how to implement it?

Answer 1

typeahead-on-select="vm.onNameSelected($item, $model, $label)"

and resolve it in the onNameSelected method of the controller.