Adding Newline in HTML w/ AngularJS [duplicate]

Question

I'm trying to get AngularJS and/or HTML to print out the following on 2 separate lines:

FOO
BAR

But my following HTML and JS are showing it on the same line despite my newline \n.

HTML

<div ng-controller="MyCtrl">
  {{name}}!
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.name = 'FOO \n BAR';
}

Is this possible?

JSFiddle

Answer 1

You can simply use a <br> :

JS

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

function MyCtrl($scope) {
   $scope.name = 'FOO <br> BAR';
}

HTML

<div ng-controller="MyCtrl">
  <span class="name" ng-bind-html-unsafe="name"></span>!
</div>

More doc about the ng-bind-html directive : https://docs.angularjs.org/api/ng/directive/ngBindHtml