Demo: dynamic-bind-html

What's it for?

dynamic-bind-html is a directive inspired by ng-bind-html that accepts uncompiled angular code in addition to raw html.

You can also manually trigger a re-$compile of its contents with an "updateDynamicBindHtml" event.

Basic usage:

HTML:

In the controller:

Result:

Modifying the contents:

Once compiled, directives inside a dynamic-bind-html will perform as expected:

$scope.ngHtml = "

foo

" $scope.ngHtml = "

bar

Forcing a recompile:

$broadcast or $emit an "updateDynamicBindHtml" event and dynamic-bind-html will recompile its contents.

HTML:

In the controller:

Note (ng-repeat only): When using this directive, wrap ng-repeats to avoid a bug where Angular fails to clean up the references properly after the update event.

Live Demo:

displayedCollection: "{{displayedCollection}}"
order: "{{order}}"

Doesn't require a $broadcast:

$scope.order = "id"; $scope.order = "text";

Requires a $broadcast:

$scope.displayedCollection = "eatSleepCodeRepeat"; $scope.displayedCollection = "eatSleepHackRepeat";

$broadcast('updateDynamicBindHtml');