darzo27/SO_Answer

## SO_Answer
To bind the inner HTML of any HTML element to a variable value you can use:

 - `ng-bind-html` Directive and pass a variable or expression to it (using variables, literals & operators).

> Try it here: [JSFiddle](https://jsfiddle.net/DARZO27/01q4jeht/2/ )

<script async src="//jsfiddle.net/DARZO27/01q4jeht/2/embed/js,html,css,result/dark/"></script>


    <div ng-app="myApp" ng-controller="myCtrl">

      <p ng-bind-html="myText"></p>

      <p>My name is <span ng-bind-html="name"></span><p>

      <p> Position:<span ng-bind-html="position"></span></p>

    </div>

    <script>
    var app = angular.module("myApp", ['ngSanitize']);
    app.controller("myCtrl", function($scope) {
        $scope.myText = "<h1>Leaderboard</h1><hr width='80%' size='5' color='#000000'>";
        $scope.name = "<h2>Jane Doe</h2>";
        $scope.position = "<h1>1<sup>st</sup><h1>";
    });
    </script>

   <p><b>Note:</b> This example includes the "angular-sanitize.js",
    which has functions for removing potentially dangerous tokens from the HTML.


----------

 - `ng-html-compile` Directive used to bind and compile an HTML fragment

'If using ng-html-compile inside a directive that creates a child scope (like ng-repeat), use an object to define your model. Otherwise, the binding will be created with a new property created inside the child scope.'-Francis Bouvier

*index.html*

    <html ng-app="MyApp">
      <body ng-controller="HomeCtrl">

      <div ng-repeat="htmlTemplate in htmlTemplates">
        <span ng-html-compile="htmlTemplate"></span>
      </div>

      <div>{{author.name}}</div>

      <script src="libs/angular.js"></script>
      <script src="libs/ngHtmlCompile.js"></script>
      <script src="script.js"></script>

      </body>
    </html>

*script.js*

    var myApp = angular.module('MyApp', ['ngHtmlCompile']);

    function HomeCtrl($scope) {
    	$scope.author = {
    		name: 'Camaron de la Isla'
    	};
    	$scope.htmlTemplates = ['<b>Name</b> <input type="text" ng-model="author.name" />'];
    };

*ngHtmlComile.js*

    angular.module('ngHtmlCompile', []).
        directive('ngHtmlCompile', function($compile) {
    	return {
    	    restrict: 'A',
    	    link: function(scope, element, attrs) {
    		scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) {
    		    element.html(newValue);
    		    $compile(element.contents())(scope);
    		});
    	    }
    	}
        });

Sources:

 - https://www.w3schools.com/angular/ng_ng-bind-html.asp
 - https://github.com/francisbouvier/ng_html_compile
	To bind the inner HTML of any HTML element to a variable value you can use:

	- `ng-bind-html` Directive and pass a variable or expression to it (using variables, literals & operators).

	> Try it here: [JSFiddle](https://jsfiddle.net/DARZO27/01q4jeht/2/ )

	<script async src="//jsfiddle.net/DARZO27/01q4jeht/2/embed/js,html,css,result/dark/"></script>


	<div ng-app="myApp" ng-controller="myCtrl">

	<p ng-bind-html="myText"></p>

	<p>My name is <span ng-bind-html="name"></span><p>

	<p> Position:<span ng-bind-html="position"></span></p>

	</div>

	<script>
	var app = angular.module("myApp", ['ngSanitize']);
	app.controller("myCtrl", function($scope) {
	$scope.myText = "<h1>Leaderboard</h1><hr width='80%' size='5' color='#000000'>";
	$scope.name = "<h2>Jane Doe</h2>";
	$scope.position = "<h1>1<sup>st</sup><h1>";
	});
	</script>

	<p><b>Note:</b> This example includes the "angular-sanitize.js",
	which has functions for removing potentially dangerous tokens from the HTML.


	----------

	- `ng-html-compile` Directive used to bind and compile an HTML fragment

	'If using ng-html-compile inside a directive that creates a child scope (like ng-repeat), use an object to define your model. Otherwise, the binding will be created with a new property created inside the child scope.'-Francis Bouvier

	index.html

	<html ng-app="MyApp">
	<body ng-controller="HomeCtrl">

	<div ng-repeat="htmlTemplate in htmlTemplates">
	<span ng-html-compile="htmlTemplate"></span>
	</div>

	<div>{{author.name}}</div>

	<script src="libs/angular.js"></script>
	<script src="libs/ngHtmlCompile.js"></script>
	<script src="script.js"></script>

	</body>
	</html>

	script.js

	var myApp = angular.module('MyApp', ['ngHtmlCompile']);

	function HomeCtrl($scope) {
	$scope.author = {
	name: 'Camaron de la Isla'
	};
	$scope.htmlTemplates = ['<b>Name</b> <input type="text" ng-model="author.name" />'];
	};

	ngHtmlComile.js

	angular.module('ngHtmlCompile', []).
	directive('ngHtmlCompile', function($compile) {
	return {
	restrict: 'A',
	link: function(scope, element, attrs) {
	scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) {
	element.html(newValue);
	$compile(element.contents())(scope);
	});
	}
	}
	});

	Sources:

	- https://www.w3schools.com/angular/ng_ng-bind-html.asp
	- https://github.com/francisbouvier/ng_html_compile