javascript - How can I add an element within the directive? -

i have input box trying add functionality to. want write class directive add ability input box. want when user enters '@', box pop showing options, using uib-typeahead. cant figure out way display box without making original text box disappear, although ideally box pop user typing

<div class="medium-2">    <label>age:</label>  </div> <div class="medium-10">     <input type="text" class="form-control pop-up-variables" name="age" error-message="ageerrormessage" required>     </input> </div> 

the block want able add this:

<input class="variable-dropdown" type="text" uib-typeahead="number number number in numbers | filter:$viewvalue" ng-model="selectedattribute" placeholder="choose variable">  </input> 

i don't want return template in directive because dont want replace block directive on, don't know how add correctly dom.

the simple js looks like:

  app.directive('popupvariables', function() {    return {     restrict: 'c',     controller: function($scope) {         $scope.numbers = ['one', 'two', 'three', 'four', 'five'];     },     link: function (scope, element, attrs, ngmodelctrl) {         element.on('keypress', function(event) {             if (event.which === 64) {                 // want show second input             }         });       }    } })