title: AngularJS - Different template in directive
body: <p>I have a form based on twitter bootstrap, each field have it's own configuration</p>
  
  <pre class="lang-js prettyprint-override"><code>// controller (the template shows this in ng-repeat
  
  $scope.fields = [{name:"f1", label:"Field 1", with_button: false},
                   {name:"f2", label:"Field 2", with_button: true}]
  </code></pre>
  
  <p>I'm trying to make a "conditional directive" that customize the template according to "field.with_button"</p>
  
  <pre class="lang-html prettyprint-override"><code>// Without button
  &lt;div class="controls"&gt;
      &lt;input type="text" id="i_{{field.name}}"&gt;
  &lt;/div&gt;
  
  // With button
  &lt;div class="controls"&gt;
      &lt;div class="input-append"&gt;
          &lt;input type="text" id="i_{{field.name}}"&gt;
          &lt;span class="add-on"&gt;bt&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I searched a lot and didn't find any solution, I tried to create only one div and put contents inside with a compiler function but it didn't parse, and if I call <code>$apply</code> it crashes.</p>
  
  <h2>How could I make this directive?</h2>
  
  <p><strong>wrong</strong> My last try:</p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('mymodule',[]).directive('ssField', function() {
      return {
          transclude:false,
          scope: {
              field: '='
          },
          restrict: 'E',
          replace:true,
          template: '&lt;div class="controls"&gt;{{innerContent}}&lt;/div&gt;',
          controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
              $scope.$eval('$scope.innerContent = \'&lt;input type="text" id="input_{{field.name}}" placeholder="{{field.name}}" class="input-xlarge"&gt;\'');
          }]
      };
  });
  
  //&lt;ss-field field="{{field}}"&gt;&lt;/ss-field&gt;
  </code></pre>