AngularJS dynamic messages

This is a fiddle designed show off dynamic message generation

by iweinfuld

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-controller="Ctrl">
    <h2>Dynamically generated messages</h2>
    <input type="text" placeholder="Name" ng-model="html"/>
    <div compile="html"></div>
</div>

JavaScript

angular.module('compile', [], function($compileProvider) {
  $compileProvider.directive('compile', function($compile) {
    return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
          return scope.$eval(attrs.compile);
        },
        function(value) {
          element.html(value);

          $compile(element.contents())(scope);
        }
      );
    };
  })
});
 
function Ctrl($scope) {
    
  $scope.name = 'Angular';
  $scope.html = 'Hello {{name}}';
}