title: Dynamically select directive based on data
body: <p>I am trying to populate a table based on an array of objects. This array doesn't contain objects of the same type and for each row I'd like a completetly diferent style and, onclick function, basically a completely different behaviour. 
  For instance,</p>
  
  <pre><code>var data=[
    {
      type:'dir-b',
      data: { ... }
    },
    {
      type:'dir-b',
      data: { ... }
    },
    {
      type:'dir-c',
      data: { ... }
    }
  ]
  </code></pre>
  
  <p>For object type dirB I want a template and controller and for dirC a completely different function and template.</p>
  
  <p>The solution I found was to create 3 directives. One of wich will run to determine one of the other two directives to add based on data.</p>
  
  <pre><code>.directive("dirA", function($compile){
    return{
      restrict:'A',
      priority:1000,
      terminal:true,
      link: function(scope, element, attribute){
        element.removeAttr("dir-a");//prevent endless loop
        element.attr(attribute.type,"");
        $compile(element)(scope);
      }
    }
  })
  .directive("dirB", function($compile){
    return{
      restrict:'A',
      replace:true,
      link: function(scope, element, attribute){
          console.log("dirA");
      }
    }
  })
  .directive("dirC", function($compile){
    return{
      restrict:'A',
      replace:true,
      link: function(scope, element, attribute){
          console.log("dirC");
      }
    }
  });
  </code></pre>
  
  <p>Using <code>&lt;tr dir-a type='{{d.type}}' ng-repeat='d in data'/&gt;</code> is not having the desired effect. Either I give dirA a priority of 0 and it can parse the attribute but it's repeated more times than the array size, or I give it a priority of 1000 and it can't parse the b.type and use it as a literal.
  Does anyone have a solution for this?</p>