AngularJS - как иметь директиву с динамической суб-директивой

На самом деле боролся с этим - пытался всеми возможными способами. Надеюсь, кто-нибудь может помочь.

У меня есть директива, которая создает схему пользовательского элемента управления для меня. Центральная часть пользовательского элемента управления должна быть представлена еще одной динамически генерируемой директивой, основанной на значении переменной области действия внешней директивы. Переменная области действия содержит имя внутренней директивы. Я делаю это потому, что на моей странице будет несколько динамически сгенерированных элементов с общим макетом, но разным внутренним содержимым.

то есть пример моей внешней директивы:

<div data-inner="{{inner}}">
    <!-- div content here --->
<div {{inner}} />

{{inner}} устанавливается имя следующей директивы - в этом случаеsearch, Поэтому моя страница должна стать:

<div data-inner="search">
    <!-- div content here --->
<div search />

с участиемsearch на нижнем div также заменяется содержанием этой директивы.

Есть идеи?

ОБНОВИТЬ Вот основнойjsFiddle представляя проблему, которую я имею - обратите внимание, что третий div не отображается.