Ion-slide-box or other Ionic elements not working with ngBindHtml

At runtime I have a html code string with the ion-slide-box in it. I want to bind it with ngBindHtml to a div dom element. The slide box does not work and appears broken with no functional js.

view:

controller:

$scope.scopeData.content = htmlContent;

… ion-slide-box in the htmlContent will not work and appears broken.

If I $compile the html code string and append it to a div box then it works, but it will not be shown everytime :frowning: Many times the content appears and sometimes the whole view keeps empty.

I tried to let the $compile method time for 10 seconds with $timeout and THEN append the compiled result to a div box. Same problem here.

view:

controller:

var compiledHtmlContent = $compile(htmlContent)($scope)[0];

$timeout(function() {
    document.getElementById('html-container').appendChild(compiledHtmlContent);
}, 10000);

… shows up many times but not everytime.

But why and how to solve this?

Hmm … this directive seems to work.

View:
<div html-content="scopeData.content"></div>

Controller like above …

Directive in app.js, directly after the .module call:

angular.module(...).directive('htmlContent', function (
  $compile
) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.htmlContent, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
})

NOPE!
Sometimes the content STILL disappears and won’t be shown.

Any clues? Anyone?