AngularJS - Simple Directive Use

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-app="myApp">
    <example-directive element="element"></example-directive>
</div>

JavaScript

angular.module('ui.filters', []);
angular.module('ui.directives', []);
angular.module('ui', [
  'ui.filters', 
  'ui.directives'
]).value('ui.config', {});

angular.module('ui.directives', []).directive('exampleDirective', ['$compile',
    function($compile) {
      return {
        restrict: 'E',
        scope: {element: '='},
        template: '<span ng-bind-html-unsafe="element.html"></span>',
        link: function($scope, element, attrs, controller) {
        $scope.element = {
      html:'I am an <code>HTML</code>string with <p style="color: {{element.color}}">color</p>',
       color: 'red' 
    }
          $scope.element.html = $compile($scope.element.html)($scope);
        }
      };
    }]
  );
angular.module('myApp', ['ui.directives']);