angularjs - Is it possible to setup a dynamic child directive? -

would possible setup dynamic child directive within parent directive?

in example below, i've used element directive, i'm seeing '' in view child should be.

if use attribute directive, '<>' instead.

i'm guessing there's maybe better way go this? wanted able use whatever child directive wanted in parent 'tile' directive.

definitions

  // tile   .directive('tile', function () {     return {       replace: true,       restrict: 'e',       scope: {         child: '@',         heading: '@',         icon: '@'       },       templateurl: 'templates/tile.tpl.html',       transclude: true     };   })    // stats table   .directive('statstable', function () {     return {       replace: true,       restrict: 'ae',       template: '<h1>table</h1>',     };   }); 

markup

<tile child="stats-table" heading="users" icon="user"></tile> 

templates

<article class="tile">    <i class="glyphicon glyphicon-{{icon}}"></i>   <h2>{{heading}}</h2>        <{{child}}></{{child}}>  </article> 

edit - 1 thing add: need pass data through child well. this:

<parent child-data="childdata"></parent>