How to make ng-bind-html compile angularjs code

This solution doesn't use hardcoded templates, and you can compile Angular expressions embedded within an API response.

Step 1. Install this directive: https://github.com/incuna/angular-bind-html-compile

Step 2. Include the directive in the module.

angular.module("app", ["angular-bind-html-compile"])

Step 3. Use the directive in the template:

<div bind-html-compile="letterTemplate.content"></div>

Result:

Controller Object

 $scope.letter = { user: { name: "John"}}

JSON Response

{ "letterTemplate":[    { content: "<span>Dear {{letter.user.name}},</span>" }]}

HTML Output =

<div bind-html-compile="letterTemplate.content">    <span>Dear John,</span></div>

For reference sake, here's the relevant directive:

(function () {    'use strict';    var module = angular.module('angular-bind-html-compile', []);    module.directive('bindHtmlCompile', ['$compile', function ($compile) {        return {            restrict: 'A',            link: function (scope, element, attrs) {                scope.$watch(function () {                    return scope.$eval(attrs.bindHtmlCompile);                }, function (value) {                    element.html(value);                    $compile(element.contents())(scope);                });            }        };    }]);}());

This is what I've made, no idea if it's the angular way^_TM, but it works and is super simple;

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

So;

<div id="unicTab" dynamic="unicTabContent"></div>

Edit: I found the angular way, and it's super simple.

$templateCache.put('unicTabContent', $sce.trustAsHtml(html));

<div id="unicTab" ng-include="'unicTabContent'"></div>

Don't need to make your own directives or anything.But it's a bind-once sort of deal, it wont see changes made to your html like the custom directive does.

As Vinod Louis says in his comment, the best way to do that was to use templates. I had to define a template outside of the regular code, for example I added that code inside of my index.html :

<script type="text/ng-template" id="unic_tab_template.html">    <div ng-switch on="page">        <div ng-switch-when="home"><p>{{home}}</p></div>        <div ng-switch-when="form">            <div ng-controller="formCtrl">                <div ng-repeat="item in content">{{item.name}}:{{item.value}}</div>            </div>        </div>        <div ng-switch-default>an error accured</div>    </div></script>

This template is conditional, so depending on the value of $scope.page, it switches between the 3 templates (the third being an error handler). To use it I had :

<div id="unicTab" ng-controller="unicTabCtrl">    <div ng-include="'unic_tab_template.html'"></div></div>

That way my page changes depending on the $scope inside of my unicTabCtrl controller.

To conclude the idea of inserting angularsjs template seams to be difficult to realize ($compile seams to be the solution, but I wasn't able to make it work). But instead you may use conditional templating.