javascript - Angular attribute directive - add an ng-repeat below current directive -

if had attribute directive, example this:

<select multiple ... ng-model="ctrl.model" custom-directive="ctrl.custommodel" />

where let's ngmodel , custommodel arrays. there way can, within directive's code, add piece of html below directives element have access scope of directive , able reference custommodel in end looks this:

<select multiple ... ng-model="ctrl.model" custom-directive="ctrl.custommodel" /> <div><!-- code gets added custom-directive directive , uses it's scope -->     <span ng-repeat="item in customdirectivectrl.custommodel" ng-bind="item.property"></span> </div> 

i know can add html manually using jqlite, html doesn't have access directive scope. reason don't want convert custom-directive directive attribute directive element directive because makes way more difficult add attributes such id, name, required, disabled,... underlying template elements (in case of example, select element)

edit: requested here's example of how add element after directives element:

{   restrict: 'a',   require: 'ngmodel',   scope: { custommodel: '=customdirective' },   link: function(scope, element, attrs, ngmodel) {      //element.after('<div></div>'); //this adds div after directives element      element.after('<div><span ng-repeat="item in custommodel" ng-bind="item.property"></span></div>'); //this add html in string, not interpret angular directives within since (i assume) not bound scope.   } } 

any angular component/directive added not work or @ all.

if injecting new html page in directive, , need html use angular directives (ng-repeat, ng-bind, etc) need use $compile service make angular aware of new dom elements. in case, inject $compile service directive , use this:

 link: function(scope, element, attrs, ngmodel) {       //create new html       var newelement = angular.element('<div><span ng-repeat="item in custommodel" ng-bind="item.property"></span></div>');           //compile scope angular execute directives used       $compile(newelement)(scope); //<-this scope in link function "custommodel" accessible.        //insert html wherever want       element.after(newelement);  }