AngularJS bind-button-html and bind-html-compile

There is two method of data-binding. 1: You can bind with directly your own directive. 2: You can make custom template directive for binding.

HTML

<div ng-app="MyApp">
  <div ng-controller="MyAppCtrl">
  <button-html></button-html>
  <h3>
  Write code for test button
  </h3>
  <textarea cols="70" rows="10" ng-model="MyHTML"></textarea>
    <div bind-html-compile="MyHTML">Note: This text will be removed and in textarea make html template or use html tag e.g. <a href="#" ng-click="someFunction('wow')">click here</a></div>
  </div>
</div>

CSS

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/

JavaScript

angular.module('MyApp', [])
  .controller('MyAppCtrl', function($scope) {
     $scope.someFunction = function(val) {
     	alert(val);
   	 };
     $scope.showMessage = function(message) {
        alert(message);
     };
  })
  .directive('bindHtmlCompile', function($compile) {
    return {
      restrict: "E",
      scope: { bindHtmlCompile: "=" },
      link: function(scope, elem) {
        scope.$watch("bindHtmlCompile", function(newTxt) {
          elem.html('');
          elem.append($compile(angular.element(newTxt))(scope.$parent));
        });
      }
    };
  })
  .directive('buttonHtml',function(){    
    return {
        restrict: 'E',
        template: "<button ng-click='showMessage(\"foo\")'>click me</button>"
    }
});