AngularJS directive dynamic templates -

sorry, maybe it's stupid question i'm still learning.

i'm trying make directive differtent templates based on scope value.

this done far don't know why doesn't work http://jsbin.com/mibeyotu/1/edit

html element:

<data-type content-attr="test1"></data-type> 

directive:

var app = angular.module('myapp', []);  app.directive('datatype', function ($compile) {      var testtemplate1 = '<h1>test1</h1>';     var testtemplate2 = '<h1>test2</h1>';     var testtemplate3 = '<h1>test3</h1>';      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:'='         }     }; }); 

1) passing content attribute in html. try this:

element.html(gettemplate(attrs.content)).show(); 

instead of:

element.html(gettemplate(scope.content)).show(); 

2) data part of directive getting compiled should use else. instead of data-type, e.g. datan-type.

here link:

http://jsbin.com/mibeyotu/6/edit