HTML <br> tag is not rendering on page with AngularJS

Question

I'm developing an angularJS application and when I set a String value with "<br>" tag, it is not rendering as HTML tag and it prints as "AA<br>BB" on the page. So I change it to "<br>" that is also not rendered and print as "AA<br>BB" .

for(x=0; x < data.length ; x++ ){
    csf = csf + '<br> '+data[x].csf;
}

$scope.targetValue = csf;

and I use this value in HTML as :

<div class="fz-display-table-cell fz-col-3 fz-main-result">
   <small>CSF:{{targetValue}} </small>
</div>

what is the reason for not rendering this text and print the tag in page?

Answer 1

You need to use ng-bind-html to render HTML:

<div class="fz-display-table-cell fz-col-3 fz-main-result">
   <small>CSF: <span ng-bind-html="{{targetValue}}"></span></small>
</div>

Answer 2

You can use ng-bind-html for this but its not a good idea to generate HTML inside controller in angular and assign it a scope value, if you are doing so then you are not using true power of angular.

In this case, instead, you can use ng-repeat . see the below code

http://jsfiddle.net/jigardafda/5henysda/1/

HTML

<div ng-app="app">
    <div ng-controller="tcrtl">
        <div class="fz-display-table-cell fz-col-3 fz-main-result">
            CSF:
            <div ng-repeat="item in data"> 
                <br/> {{item.csf}} 
            </div>
        </div>
    </div>
</div>

JS

var app = angular.module('app', []);

app.controller('tcrtl', function($scope){

    var data = [
        {
            csf: 'one'
        },
        {
            csf: 'two'
        }
    ]

    $scope.data = data;
});