title: Modify element in an angularjs directive and reinject it in a template
body: <p>I need to apply conditional modification to an element with a directive attached to it and then put in in a new template. I don't want to 'override' it.</p>
  
  <p>I haven't figured it out yet, thanks btw!</p>
  
  <p>I know I can use translude, but I would like to be able to modify conditionally the template too.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;directive-name&gt;&lt;/directive-name&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>.directive('directiveName', function($compile) {
    return {
      restrict: 'E',
      link : {
        pre: function(scope, iElement, iAttributes) {
          if(condition) {
            iElement.attr('a-attribute', "field")
            break;
          }
          else {
            iElement.attr('b-attribute', "field")                     
            break;
          }
          var template =
            '&lt;pre&gt;' + // Some very cool template here
              iElement.html() + // Here it's where it doesn't work :(
            '&lt;/pre&gt;';
          newElement = $compile(template)(scope);
          iElement.replaceWith(newElement);     
         }
       },
     }
  })
  </code></pre>