diff --git a/bower.json b/bower.json
index d91288b..ab1722b 100644
--- a/bower.json
+++ b/bower.json
@@ -9,7 +9,10 @@
 		"url": "https://github.com/marcorinck/angular-growl"
 	},
 	"license": "MIT",
-	"main": "./build/angular-growl.js",
+	"main": [
+		"./build/angular-growl.js",
+		"./build/angular-growl.min.css"
+	],
 	"ignore": [
 		"src",
 		"test",
diff --git a/build/angular-growl.js b/build/angular-growl.js
index e461296..ff97b5c 100644
--- a/build/angular-growl.js
+++ b/build/angular-growl.js
@@ -1,18 +1,27 @@
 /**
- * angular-growl - v0.4.0 - 2013-11-19
+ * angular-growl - v0.4.0 - 2015-04-04
  * https://github.com/marcorinck/angular-growl
- * Copyright (c) 2013 Marco Rinck; Licensed MIT
+ * Copyright (c) 2015 Marco Rinck; Licensed MIT
  */
 angular.module('angular-growl', []);
 angular.module('angular-growl').directive('growl', [
   '$rootScope',
-  function ($rootScope) {
+  '$compile',
+  function ($rootScope, $compile) {
     'use strict';
     return {
       restrict: 'A',
-      template: '<div class="growl">' + '\t<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' + '\t\t<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' + '       <div ng-switch="message.enableHtml">' + '           <div ng-switch-when="true" ng-bind-html="message.text"></div>' + '           <div ng-switch-default ng-bind="message.text"></div>' + '       </div>' + '\t</div>' + '</div>',
       replace: false,
       scope: true,
+      link: function ($scope, element, attrs) {
+        var template = '<div class="growl">' + '\t<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' + '\t\t<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' + '       <div ng-switch="message.enableHtml">' + '           <div ng-switch-when="true" ng-bind-html="message.text"></div>' + '           <div ng-switch-default ng-bind="message.text"></div>' + '       </div>' + '\t</div>' + '</div>';
+        if (attrs.templateUrl) {
+          $scope.templateUrl = attrs.templateUrl;
+          template = '<div><ng-include src="templateUrl"/></div>';
+        }
+        element.html(template);
+        $compile(element.contents())($scope);
+      },
       controller: [
         '$scope',
         '$timeout',
diff --git a/build/angular-growl.min.js b/build/angular-growl.min.js
index 83798c5..00747e4 100644
--- a/build/angular-growl.min.js
+++ b/build/angular-growl.min.js
@@ -1,6 +1,6 @@
 /**
- * angular-growl - v0.4.0 - 2013-11-19
+ * angular-growl - v0.4.0 - 2015-04-04
  * https://github.com/marcorinck/angular-growl
- * Copyright (c) 2013 Marco Rinck; Licensed MIT
+ * Copyright (c) 2015 Marco Rinck; Licensed MIT
  */
-angular.module("angular-growl",[]),angular.module("angular-growl").directive("growl",["$rootScope",function(a){"use strict";return{restrict:"A",template:'<div class="growl">	<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">		<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>       <div ng-switch="message.enableHtml">           <div ng-switch-when="true" ng-bind-html="message.text"></div>           <div ng-switch-default ng-bind="message.text"></div>       </div>	</div></div>',replace:!1,scope:!0,controller:["$scope","$timeout","growl",function(b,c,d){function e(a){b.messages.push(a),a.ttl&&-1!==a.ttl&&c(function(){b.deleteMessage(a)},a.ttl)}var f=d.onlyUnique();b.messages=[],a.$on("growlMessage",function(a,c){var d;f?(angular.forEach(b.messages,function(a){c.text===a.text&&c.severity===a.severity&&(d=!0)}),d||e(c)):e(c)}),b.deleteMessage=function(a){var c=b.messages.indexOf(a);c>-1&&b.messages.splice(c,1)},b.computeClasses=function(a){return{"alert-success":"success"===a.severity,"alert-error":"error"===a.severity,"alert-danger":"error"===a.severity,"alert-info":"info"===a.severity,"alert-warning":"warn"===a.severity}}}]}}]),angular.module("angular-growl").provider("growl",function(){"use strict";var a=null,b=!1,c="messages",d="text",e="severity",f=!0;this.globalTimeToLive=function(b){a=b},this.globalEnableHtml=function(a){b=a},this.messagesKey=function(a){c=a},this.messageTextKey=function(a){d=a},this.messageSeverityKey=function(a){e=a},this.onlyUniqueMessages=function(a){f=a},this.serverMessagesInterceptor=["$q","growl",function(a,b){function d(a){a.data[c]&&a.data[c].length>0&&b.addServerMessages(a.data[c])}function e(a){return d(a),a}function f(b){return d(b),a.reject(b)}return function(a){return a.then(e,f)}}],this.$get=["$rootScope","$filter",function(c,g){function h(a){p&&(a.text=p(a.text)),c.$broadcast("growlMessage",a)}function i(c,d,e){var f,g=d||{};f={text:c,severity:e,ttl:g.ttl||a,enableHtml:g.enableHtml||b},h(f)}function j(a,b){i(a,b,"warn")}function k(a,b){i(a,b,"error")}function l(a,b){i(a,b,"info")}function m(a,b){i(a,b,"success")}function n(a){var b,c,f,g;for(g=a.length,b=0;g>b;b++)if(c=a[b],c[d]&&c[e]){switch(c[e]){case"warn":f="warn";break;case"success":f="success";break;case"info":f="info";break;case"error":f="error"}i(c[d],void 0,f)}}function o(){return f}var p;try{p=g("translate")}catch(q){}return{addWarnMessage:j,addErrorMessage:k,addInfoMessage:l,addSuccessMessage:m,addServerMessages:n,onlyUnique:o}}]});
\ No newline at end of file
+angular.module("angular-growl",[]),angular.module("angular-growl").directive("growl",["$rootScope","$compile",function(a,b){"use strict";return{restrict:"A",replace:!1,scope:!0,link:function(a,c,d){var e='<div class="growl">	<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">		<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>       <div ng-switch="message.enableHtml">           <div ng-switch-when="true" ng-bind-html="message.text"></div>           <div ng-switch-default ng-bind="message.text"></div>       </div>	</div></div>';d.templateUrl&&(a.templateUrl=d.templateUrl,e='<div><ng-include src="templateUrl"/></div>'),c.html(e),b(c.contents())(a)},controller:["$scope","$timeout","growl",function(b,c,d){function e(a){b.messages.push(a),a.ttl&&-1!==a.ttl&&c(function(){b.deleteMessage(a)},a.ttl)}var f=d.onlyUnique();b.messages=[],a.$on("growlMessage",function(a,c){var d;f?(angular.forEach(b.messages,function(a){c.text===a.text&&c.severity===a.severity&&(d=!0)}),d||e(c)):e(c)}),b.deleteMessage=function(a){var c=b.messages.indexOf(a);c>-1&&b.messages.splice(c,1)},b.computeClasses=function(a){return{"alert-success":"success"===a.severity,"alert-error":"error"===a.severity,"alert-danger":"error"===a.severity,"alert-info":"info"===a.severity,"alert-warning":"warn"===a.severity}}}]}}]),angular.module("angular-growl").provider("growl",function(){"use strict";var a=null,b=!1,c="messages",d="text",e="severity",f=!0;this.globalTimeToLive=function(b){a=b},this.globalEnableHtml=function(a){b=a},this.messagesKey=function(a){c=a},this.messageTextKey=function(a){d=a},this.messageSeverityKey=function(a){e=a},this.onlyUniqueMessages=function(a){f=a},this.serverMessagesInterceptor=["$q","growl",function(a,b){function d(a){a.data[c]&&a.data[c].length>0&&b.addServerMessages(a.data[c])}function e(a){return d(a),a}function f(b){return d(b),a.reject(b)}return function(a){return a.then(e,f)}}],this.$get=["$rootScope","$filter",function(c,g){function h(a){p&&(a.text=p(a.text)),c.$broadcast("growlMessage",a)}function i(c,d,e){var f,g=d||{};f={text:c,severity:e,ttl:g.ttl||a,enableHtml:g.enableHtml||b},h(f)}function j(a,b){i(a,b,"warn")}function k(a,b){i(a,b,"error")}function l(a,b){i(a,b,"info")}function m(a,b){i(a,b,"success")}function n(a){var b,c,f,g;for(g=a.length,b=0;g>b;b++)if(c=a[b],c[d]&&c[e]){switch(c[e]){case"warn":f="warn";break;case"success":f="success";break;case"info":f="info";break;case"error":f="error"}i(c[d],void 0,f)}}function o(){return f}var p;try{p=g("translate")}catch(q){}return{addWarnMessage:j,addErrorMessage:k,addInfoMessage:l,addSuccessMessage:m,addServerMessages:n,onlyUnique:o}}]});
\ No newline at end of file
diff --git a/demo/custom.html b/demo/custom.html
new file mode 100644
index 0000000..65afed1
--- /dev/null
+++ b/demo/custom.html
@@ -0,0 +1,9 @@
+<div class="growl">
+   <div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">
+       <button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>
+       <div ng-switch="message.enableHtml">
+           <div ng-switch-when="true" ng-bind-html="message.text"></div>
+           <div ng-switch-default ng-bind="message.text"></div>
+       </div>
+   </div>
+</div>
\ No newline at end of file
diff --git a/demo/demo.html b/demo/demo.html
index ba84da0..2ff8796 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -23,7 +23,7 @@
 <div ng-controller="demoCtrl">
     <div class="text-center container"><h1>angular-growl Demo site</h1></div>
 
-    <div growl></div>
+    <div growl template-url="custom.html"></div>
     <div class="container">
         <div class="well row">
             <label>
diff --git a/demo/demo.js b/demo/demo.js
index 8af3ea6..07d263a 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -7,8 +7,6 @@ app.config(["growlProvider", "$httpProvider", function(growlProvider, $httpProvi
 	growlProvider.messageSeverityKey("severity-level");
 	growlProvider.onlyUniqueMessages(true);
 	$httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);
-
-
 }]);
 
 app.run(function($httpBackend) {
@@ -21,6 +19,7 @@ app.run(function($httpBackend) {
 			{"messagetext":"and another", "severity-level": "error"}
 		]
 	});
+	$httpBackend.whenGET('custom.html').passThrough();
 });
 
 app.controller("demoCtrl",  function demoCtrl($scope, growl, $http) {
diff --git a/src/growlDirective.js b/src/growlDirective.js
index edad549..11e6f6e 100644
--- a/src/growlDirective.js
+++ b/src/growlDirective.js
@@ -1,19 +1,29 @@
-angular.module("angular-growl").directive("growl", ["$rootScope", function ($rootScope) {
+angular.module("angular-growl").directive("growl", ["$rootScope", "$compile", function ($rootScope, $compile) {
 	"use strict";
 
 	return {
 		restrict: 'A',
-		template:   '<div class="growl">' +
-					'	<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' +
-					'		<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' +
-					'       <div ng-switch="message.enableHtml">' +
-					'           <div ng-switch-when="true" ng-bind-html="message.text"></div>' +
-					'           <div ng-switch-default ng-bind="message.text"></div>' +
-					'       </div>' +
-					'	</div>' +
-					'</div>',
 		replace: false,
 		scope: true,
+		link: function($scope, element, attrs){
+			var template = '<div class="growl">' +
+							'	<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' +
+							'		<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' +
+							'       <div ng-switch="message.enableHtml">' +
+							'           <div ng-switch-when="true" ng-bind-html="message.text"></div>' +
+							'           <div ng-switch-default ng-bind="message.text"></div>' +
+							'       </div>' +
+							'	</div>' +
+							'</div>';
+
+			if(attrs.templateUrl){
+				$scope.templateUrl = attrs.templateUrl;
+				template = '<div><ng-include src="templateUrl"/></div>';
+			}
+
+			element.html(template);
+			$compile(element.contents())($scope);
+		},
 		controller: ['$scope', '$timeout', 'growl', function ($scope, $timeout, growl) {
 			var onlyUnique = growl.onlyUnique();