Как динамически добавить компонент AngularJS type-ahead, который имеет собственное уникальное событие type-ahead-on-select?

Я могу динамически добавлять компонент опережающего ввода, но не могу предоставить ему собственное событие опережающего ввода при выборе. (эта часть работает)

Для второго ввода при выборе элемента из списка он должен заполнять стоимость и сумму на основе данных из базы данных, как это. (Эта часть не работает)

Как динамически добавить компонент AngularJS type-ahead, который имеет собственное уникальное событие type-ahead-on-select? Он будет заполнять стоимость и сумму первого элемента, потому что шаблон, по-видимому, статичен, а не динамичен.

Я пытался использовать jquery, чтобы добавить атрибут type-ahead-on-select с функцией, которую он вызовет, но это не сработало...

Вот мой код.

Автозаполнение — это элемент управления вводом имени элемента.

addautobtn — это кнопка «Новый элемент», которую вы видели на картинках. Он добавляет новую строку элемента, которая имеет ввод, стоимость и количество.

app.directive('autocomplete', function($compile) {
    return {
        restrict: 'E',
        scope: { itemName: '@' },
        template: "<input type='text' name='name' ng-model='item' typeahead='item as item.name for item in getItems() | filter:$viewValue | limitTo:4' typeahead-on-select='updateItemInputValues(item, "+getNumItems()+")' class='inputStr form-control'>",
        controller: function ( $scope, $element ) {
            $scope.getItems = function() {
                return JSON.parse(sessionStorage.getItem('items'));
            };

            $scope.updateItemInputValues = function( item, itemNumber ) {
                $('#itemCost'+itemNumber).val( item.cost.toFixed(2) );
                $('#itemAmount'+itemNumber).val( item.amount ); 
            }
        }
    }
});

app.directive('addautobtn', function($compile) {
    return {
        restrict: 'E',
        scope: { text: '@' },
        template: "<input type='button' class='btn btn-primary btn-sm' value='New Item' ng-click='add()'>",
        controller: function ( $scope, $element ) {
          $scope.add = function () {
            numItems++;
            var itemRow = document.createElement('div');
            itemRow.setAttribute( 'id', 'item'+(numItems) );
            itemRow.setAttribute( 'class', 'row itemRow' );

                var itemColTitle = document.createElement('div');
                itemColTitle.setAttribute( 'class', 'col-md-1' );
                    var title = document.createElement('h4');
                    title.setAttribute( 'id', 'itemNumber'+numItems );
                    title.setAttribute( 'class', 'variable' );
                    title.appendChild( document.createTextNode(numItems) );
                    itemColTitle.appendChild(title);

                var itemColName = document.createElement('div');
                itemColName.setAttribute( 'class', 'col-md-3 itemCol' );
                    var itemNameInput = $compile( "<autocomplete id='itemName"+numItems+"'></autocomplete>" )( $scope );

                $(itemColName).append( itemNameInput );

                var itemColCost = document.createElement('div');
                itemColCost.setAttribute( 'class', 'col-md-2 itemCol' );
                itemColCost.appendChild( createItemInput('number', 'cost', sizeTypes['numberLg']+' form-control') );

                var itemColAmount = document.createElement('div');
                itemColAmount.setAttribute( 'class', 'col-md-2 itemCol' );
                itemColAmount.appendChild( createItemInput('number', 'amount', sizeTypes['numberSm']+' form-control') );

                var deleteCol = document.createElement('div');
                deleteCol.setAttribute( 'id', 'deleteItem'+numItems );
                deleteCol.setAttribute( 'class', 'col-md-1 deleteCol' );
                deleteCol.setAttribute( 'onclick', 'deleteItem('+numItems+')' );
                    var deleteLink = document.createElement('a');
                    deleteLink.setAttribute( 'class', 'btn btn-danger btn-xs' );
                        var deleteIcon = document.createElement( 'i' );
                        deleteIcon.setAttribute( 'class', 'glyphicon glyphicon-trash' );
                    deleteLink.appendChild( deleteIcon );
                deleteCol.appendChild( deleteLink );

            itemRow.appendChild( itemColTitle );
            itemRow.appendChild( itemColName );
            itemRow.appendChild( itemColCost );
            itemRow.appendChild( itemColAmount );
            itemRow.appendChild( deleteCol );

            $("#item"+(numItems-1)).after( itemRow );
          };
        }
    };
});