javascript - Angular have an element show up when not in a angular template -

i have input box class directive on it. within input box delement, want have element ng-show. how make scope variable available on inner element?

<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 ng-show="showinnerblock" 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             scope.showinnerblock = true;           }         });       }    } }) 

events outside of angular context chnge scope must notify angular run digest update view.

if used ng-keypress internally otherwise use $apply or $timeout

link: function (scope, element, attrs, ngmodelctrl) {     element.on('keypress', function(event) {       if (event.which === 64) {                     scope.showinnerblock = true;         $scope.$apply()       }     });   }