Variable is not showing in binded HTML using AngularJs - angularjs

Question

<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myMarkup"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myMarkup = "<h1>Hi {{name}}</h1>";
$scope.name="Habib";
});
</script>
Comming Output:
Hi {{name}}
Desired Output:
Hi Habib

Answer 1

You can compile the $scope variable with a directive and hence you do not need ngSanitize
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$sce) {
$scope.myMarkup = "<h1>Hi {{name}}</h1>";
$scope.name="Habib";
$scope.trustAsHtml = function(html){
return $sce.trustAsHtml(html);
}
});
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.ngBindHtml);
function getStringValue() {
return (parsed(scope) || '').toString();
}
// Recompile if the template changes
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope); // The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="trustAsHtml(myMarkup)" compile-template></p>
</div>

Answer 2

You shoud use $interpolate like this: (Notice you must declare the interpolated value before the markup)
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope, $interpolate) {
$scope.name = "Habib";
$scope.myMarkup = $interpolate("<h1>Hi {{name}}</h1>")($scope);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myMarkup"></p>
</div>

Answer 3

app.controller("myCtrl", function($scope,$interpolate) {
$scope.name="Habib";
$scope.myMarkup = $interpolate('<h1>Hi {{name}}</h1>')($scope);
});
Try with above code. Might help!! $compile is an alternative of $interpolate. You can try that too.