<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller='myController'>
    <my-directive template="type"></my-directive>
  </body> 

</html>

var app = angular.module('myApp', [])
app.directive('myDirective', [function(){
	
	return {
		template: '<div ng-include="getTemplate()"></div>',
		restrict: 'E',
    scope: {template: '='},
    link: function(scope, element, attr, ctrl) {
      var baseURL = 'templates/myDirective.'
    
      scope.getTemplate = function(){
          baseURL = "" //remove this
          return baseURL + scope.template + ".html"
        };
    }
    };
    }]);

app.controller('myController', function($scope) {
      $scope.type = 'test'
  });
/* Styles go here */

<p>testing the directive</p>