title: How can I add code into my directive with transclude and pass in a parameter in AngularJS?
body: <p>I have code like the following that's used in many places in my application and
  would like to replace some of this HTML with a directive. I realize there is 
  not so much I can replace as the HTML's are so different:</p>
  
  <pre><code>&lt;div class="select-area"&gt;
     &lt;span&gt;Subject&lt;/span&gt;
     &lt;select data-ng-disabled="option.subjects.length == 0"
             data-ng-model="option.selectedSubject"
             data-ng-options="item.id as item.name for item in option.subjects"&gt;
     &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="select-area" data-ng-hide="utilityService.isNotNumber(option.selectedTopic)"&gt;
     &lt;span&gt;Subtopic&lt;/span&gt;
     &lt;select data-ng-model="option.selectedSubtopic"
             data-ng-options="item.id as item.name for item in option.subtopicsPlus"&gt;
     &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to use a directive but I am not really sure how to start. I want to use
  transclude to replace the inside  so I was thinking that my directive call 
  would look something like this:</p>
  
  <pre><code>&lt;div class="select-area" my-select-area="Subject"&gt;
     &lt;select data-ng-disabled="option.subjects.length == 0"
             data-ng-model="option.selectedSubject"
             data-ng-options="item.id as item.name for item in option.subjects"&gt;
     &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="select-area" data-ng-hide="utilityService.isNotNumber(option.selectedTopic)" my-select-area="Subtopic"&gt;
     &lt;select data-ng-model="option.selectedSubtopic"
             data-ng-options="item.id as item.name for item in option.subtopicsPlus"&gt;
     &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's what I have so far:</p>
  
  <pre><code>app.directive('mySelect', function () {
      return {
          restrict: "A",
          template: "&lt;div class='select-area'&gt;" +
                    "&lt;span&gt; &lt;/span&gt;" +
  
                    "&lt;/div&gt;",
      };
  });
  </code></pre>
  
  <p>Can someone show me how I can pass in the parameter that goes inside the span and also how I can add transclude?</p>
  
  <p><strong>Update</strong>: Based on Bastien's answer</p>
  
  <p>There were a couple of small syntax errors but based on Bastien's answer I tried the following:</p>
  
  <pre><code>app.directive('mySelect', function () {
      return {
          restrict: "A",
          transclude: true,
          template: "&lt;div class='select-area'&gt;" +
                      "&lt;span&gt; {{ mySelectArea }} &lt;/span&gt;" +
                      "&lt;div ng-transclude&gt;&lt;/div&gt;" +
                    "&lt;/div&gt;",
          link: function (scope, element, attrs) {
              scope.mySelectArea = attrs.mySelectArea;
          }
      }
  });
  </code></pre>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div data-my-select myselectarea="Page type"&gt;
     &lt;select data-ng-model="option.selectedPageType"
             data-ng-options="item.id as item.type for item in option.pageTypes"&gt;&lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the HTML it created:</p>
  
  <pre><code>&lt;div data-my-select="" myselectarea="Page type"&gt;
  &lt;div class="select-area"&gt;
     &lt;span class="ng-binding"&gt;  &lt;/span&gt;
     &lt;div ng-transclude=""&gt;
     &lt;select data-ng-model="option.selectedPageType" 
             data-ng-options="item.id as item.type for item in option.pageTypes" 
             class="ng-scope ng-pristine ng-valid"&gt;
        &lt;option value="0"&gt;Edit Basic&lt;/option&gt;
        &lt;option value="1" selected="selected"&gt;Edit Standard&lt;/option&gt;
        &lt;option value="2"&gt;Report&lt;/option&gt;
     &lt;/select&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I really need is for it to create this:</p>
  
  <pre><code>&lt;div class="select-area"&gt;
     &lt;span&gt;Page Type&lt;/span&gt;
     &lt;select data-ng-model="option.selectedPageType" 
             data-ng-options="item.id as item.type for item in option.pageTypes" 
             class="ng-pristine ng-valid"&gt;
        &lt;option value="0"&gt;Edit Basic&lt;/option&gt;
        &lt;option value="1" selected="selected"&gt;Edit Standard&lt;/option&gt;
        &lt;option value="2"&gt;Report&lt;/option&gt;
     &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>