drag & drop (jqyoui-droppable) is not working in AngularJS

Question

I want to make a dotted string to fill up the gaps with the appropriate (drag-able) word to complete the sentence.

string like:

The ______ brown ______ jumps over the ______ dog.

words like: quick, fox, lazy

but when I bind the string with ng-bind-html the jqyoui-droppable is not working in the return string. Couldn't drop the button(drag-able key) in the gap string.

  $scope.gapList = [];

  $scope.string = "The quick brown fox jumps over the lazy dog.";
  $scope.keys = ['quick','fox','lazy'];

  $scope.createDottedString = function () {
      for (var key in $scope.keys) {
          $scope.string = $scope.string.replace($scope.keys[key], '<em data-drop="true" data-jqyoui-options  jqyoui-droppable  ng-model="$scope.gapList" > ____________ </em>');
      }
      return $sce.trustAsHtml($scope.string);

  };

html: <div ng-bind-html="createDottedString()"></div>

here is the plnkr link: demo

I've used this jqyoui-droppable plugin for drag and drop with jqueryUI.

Answer 1

Actually, I've to recompile the returned string (as HTML), so that I've written a directive as like below:

bind-unsafe-html="unsafeString"

Where unsafeString is my returned string.

Custom directive (bind-unsafe-html) like this:

app.directive('bindUnsafeHtml', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'bindUnsafeHtml' expression for changes
                return scope.$eval(attrs.bindUnsafeHtml);
            },
            function(value) {
                // when the 'bindUnsafeHtml' 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);
            }
        );
    };
}]);

I got some answers in #stackoverflow related to strings (html) compilation, which's are helped me to find out this solution.