ng-bind-html cannot detect directive as attribute

I am using ng-bing-html to show content in html.

<div ng-repeat="object in question">
   <div class="row">
      <div ng-bind-html="showComponent(object)"></div>
   </div>
</div>

In JS part:

$scope.showComponent = (object) ->

        if typeof object.type == 'undefined'
            width = object.position[1]
            offset = object.position[2]

            content = object[$scope.lang]
            console.log(typeof content)
            return '<div lvldraggable="true"' + '>' + content + '</div>'

In js lvldraggable is an attribute defined in the directive:

app.directive 'lvldraggable', ['$rootScope','uuid', ($rootScope, uuid)->
    restrict: 'A'
    replace: true
    link: (scope, el, attrs, controller) ->
        id = angular.element(el).attr("id")
        unless id
            id = uuid.new()
            angular.element(el).attr("id", id)

        el.bind "dragstart", (e)->
            e.originalEvent.dataTransfer.setData('text', id)
            $rootScope.$emit("LVL-DRAG-START")

        el.bind "dragend", (e)->
            $rootScope.$emit("LVL-DRAG-END")
]

But in the front end, lvldraggable attribute cannot be detected and translated in html. How should I fix that?

Thanks in advance!