Dynamic directives from within a resource property

I have a repeater for a resource that contains an attribute with angular directives inside, mixed with text. What I'm trying to accomplish is to show form inputs dynamically depending on the object's property.

<ul>
  <li ng-repeat="action in actions">
    {{action.form_layout}}
  </li>
</ul>

In this case action.form_layout could contain some text with directives inside that would need to be compiled too.

Open the <door></door> with this <key></key>
// <door> and <key> are directives that would return different inputs
// so this should be compiled to Open the <input type="text" name="door"></input> with this <input type="text" name="key"></input>

How can I accomplish this? Right now the property value is being printed in the template as plain text.

Thanks

Please have a look at this fiddle. http://jsfiddle.net/dH5Ln/ Here the door and key are separated as individual directives. With the help of the compile function, we are parsing the template and displaying the compiled template.