title: AngularJS directive dynamic templates
body: <p>I'm trying to make directive with differtent templates based on scope value.</p>
  
  <p>This is what i done so far which i don't know why doesn't work <a href="http://jsbin.com/mibeyotu/1/edit" rel="noreferrer">http://jsbin.com/mibeyotu/1/edit</a></p>
  
  <p>HTML element: </p>
  
  <pre><code>&lt;data-type content-attr="test1"&gt;&lt;/data-type&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.directive('dataType', function ($compile) {
  
      var testTemplate1 = '&lt;h1&gt;Test1&lt;/h1&gt;';
      var testTemplate2 = '&lt;h1&gt;Test2&lt;/h1&gt;';
      var testTemplate3 = '&lt;h1&gt;Test3&lt;/h1&gt;';
  
      var getTemplate = function(contentType){
  
          var template = '';
  
          switch(contentType){
              case 'test1':
                  template = testTemplate1;
                  break;
              case 'test2':
                  template = testTemplate2;
                  break;
              case 'test3':
                  template = testTemplate3;
                  break;
          }
  
          return template;
      }; 
  
      var linker = function(scope, element, attrs){
          element.html(getTemplate(scope.content)).show();
          $compile(element.contents())(scope);
      };
  
      return {
          restrict: "E",
          replace: true,
          link: linker,
          scope: {
              content:'='
          }
      };
  });
  </code></pre>