How to properly compile text contained html which is not comming from scope

Question

The base scenario is:

In my main diw wrapper i have:

<div class="main" ng-init="Messages ='By my opinion you should visit <a href="http:\\www.google.com">Google search</a>.';">

and i want to bind it in a div which is inside the main div wrapper like:

<div id="innerDiv" >{{ Messages}}</div>

but it renders the Messages like a string instead of string containing href. I tried to do it like:

<div ng-bind-html-unsafe="forry"> </div>

and adding the forry in my controller like:

 $scope.$watch('Messages', function () {

                $scope.forry = $scope.Messages;
            });

when its loaded. Here it loads just an empty content.

Please suggest hpw to render this variable like a string containing html.

Answer 1

The ng-bind-html-unsafe directive is no longer supported in angular 1.2. Try ng-bind-html instead:

<div ng-bind-html="forry"> </div>

You also need to use the $sce service to trust the html:

$scope.forry = $sce.trustAsHtml($scope.Messages);