AngularJS: How to transclude multiple directives?

(1) I have a transcluding directive called portlet which takes its content and wraps it in some boilerplate code. E.g:

<portlet>
  <div class="foobar">My content</div>
</portlet>

goes through the template of portlet, which is:

<div class="portlet">
  <div class="icon"></div>
  <div class="content" ng-transclude="">          
  </div>
</div>

And becomes:

<div class="portlet">
  <div class="icon"></div>
  <div class="content">
      <div class="foobar">My content</div> <!--the original content
                                         passed to portlet-->
  </div>

(2) I have two more directives, dyn-form and dyn-form-field. Described in this way:

<dyn-form>
   <dyn-form-field type="textbox" placeholder="..." label="Name" />
   <! ...and so on... -->
</dyn>

dyn-form's template:

<form class="..." ng-transclude="">
</form>

Each dyn-field's template generates the html for producing the label / fields for it. So the original code is translated into something like this:

<form class="...">
  <label>Name: <input type="text" placeholder="..." /></label>
  <!- ....and so on... -->
 </form>

(3) Here's the problem. I want to use a 3rd directive, dyn-form-portlet for generating the boilerplate code for displaying some buttons shown above every form, then show a portlet, and put the dyn-form inside the portlet. This is how I'm trying to do this:

<dyn-form-portlet>
   <dyn-form>
     <dyn-form-field />
   </dyn-form>
</dyn-form-portlet>

dyn-form-portlet's template looks like this:

<div class="dyn-form-portlet">
  <button>Foo</button>
  <button>Bar</button>
  <portlet ng-transclude="">
  </portlet>
</div>      

Theoratically this should work, i.e <dyn-form> should be placed inside <portlet>, <dyn-form-field>s inside <dyn-form>, and so on. But when I run this, I only see the buttons displayed by dyn-form-portlet and the code for portlet, but portlet is empty and the form is not being displayed in it.

Am I doing something wrong, or is this a bug?