How do I dynamically add a AngularJS typeahead component that has its own unique typeahead-on-select event?

Question

I'm able to dynamically add the typeahead component, but not able to give it its own typeahead-on-select event. (this part works)

For the second input, when selecting an item from the list, it should populate the cost and amount base on the data from the database like this. (This part doesn't work)

How do I dynamically add a AngularJS typeahead component that has its own unique typeahead-on-select event? It would populate the first item's cost and amount because the template is apparently static and not dynamic.

I've tried using jquery to add the attribute, typeahead-on-select, with a function that it'd call, but that didn't work...

Here's my code.

The autocomplete is the typeahead control for the item name.

The addautobtn, is the "New Item" button you seen in the pictures. It adds a new item row that has the typeahead input, cost and amount.

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 );
          };
        }
    };
});

Answer 1

If it is dynamic directives, you have to manually compile and link it. Like this:

var element = angular.element('<div custom-attr></div>');
angular.element(document.body).append(element);
$compile(element)(scope);