allowing directive in ng-bind-html

directiveInNgBindHtml.html

<div ng-app="vkApp">
    <div ng-controller="vkController">        
        <vk></vk>
        <div compile="data.article"></div>
    </div>
</div>
<script>
  angular.module('vkApp', []);
angular.module('vkApp')
  .controller('vkController', ['$scope', '$compile', function ($scope, $compile) {
      var data = {
          article : '<vk></vk>'
      }
      $scope.data = data;
  }]);

angular.module('vkApp')
  .directive('vk', ['$compile', function ($compile) {
    return {
      template: '<div>Content of vk</div>',
      restrict: 'E',
        link: function(scope, element, attrs){
            console.log('"link" function inside directive vk called, "element" param is: ', element)
        }
    };
 }]);

  // declare a new module, and inject the $compileProvider
angular.module('vkApp')
  .directive('compile', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
          scope.$watch(
            function(scope) {
               // watch the 'compile' expression for changes
              return scope.$eval(attrs.compile);
            },
            function(value) {
              // when the 'compile' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };
}]);

</script>