JavaScript: Line break not working

I have several string variables: 

var products = [
    {
        name: 'Product_1',
        templateUrl: 'product_1'
    },
    {
        name: 'Product_2',
        templateUrl: 'product_2'
    },
    {
        name: 'Product_3',
        templateUrl: 'product_3'
    },
    {
        name: 'Product_4 \n with extras',
        templateUrl: 'product_4'
    }
];

As you can see in product 4 i added a linebrea name: 'Product_4 \n with extras',

when i open up my html page:

<ion-list>
    <ion-item class="item-icon-right" ng-repeat="product in products" ui-sref="app.{{product.templateUrl}}" >
        {{product.name}}
    </ion-item>
</ion-list>

There is no line break. the output is:

Product_1
Product_2
Product_3
Product_4 with extras

but it should be:

Product_1
Product_2
Product_3
Product_4 
with extras

Why isnt the line break working?

ng-bind-html="product.name"

does not work as intented. As i mentioned i want the result to be:

Product_4
with extras

but with ng-bind-html="product.name" and Product_4 <br /> with extras the result is:

Prodcut 4


with extras

You should use ngBindHtml tag in AngularJS and ngSanitize in order to render HTML from your scope.

https://docs.angularjs.org/api/ng/directive/ngBindHtml

You need to set the variable with html like this var myVar = "Hello<br/>World!";

And then render your view with this <p ng-bind-html="myVar"></p>

This will output rendered HTML instead of raw text.

var products = [
    {
        name: 'Product_1',
        templateUrl: 'product_1'
    },
    {
        name: 'Product_2',
        templateUrl: 'product_2'
    },
    {
        name: 'Product_3',
        templateUrl: 'product_3'
    },
    {
        name: 'Product_4 <br/> with extras',
        templateUrl: 'product_4'
    }
];

HTML

<ion-list>
    <ion-item class="item-icon-right" ng-repeat="product in products" ui-sref="app.{{product.templateUrl}}" >
        <p ng-bind-html="product.name"></p>
    </ion-item>
</ion-list>

Of course you can use other tags than p

The problem you tell us about the multiple break lines, may be related to CSS because <br/> will output exactly what you want, see this example

https://jsfiddle.net/8019ymgj/1/

If you are using jQuery, try 

$("#doWhatNow").html("product 4 <br> with extras")