While working with AngularJS, sometimes when we are receving data from the server and that data contains a string which has line-seperations in it in the form of \n, the angularJS is not able to parse \n and thus we see the entire string in one line instead of new lines wherever desired.

For example:

This is my controller which contains users object containing the user details like name & about_me.

var testApp = angular.module('testApp', []);
			
testApp.controller('testController', function ($scope) {
  $scope.users = [
    {
      'name' : 'Rohit',
      'about_me' : 'I am optimistic.'
    },
    {
      'name' : 'Shaun',
      'about_me': 'I am a sportsman. I live in Us. I like to go for long drives'
    },
    {
      'name' : 'Amit',
      'about_me' : 'I am Amit, i belong to mumbai.\n I work on AngularJS'
    }
  ];
});

And this is my view which shows user's information,

<div ng-app="testApp" ng-controller="testController">
  <ul>
    <li ng-repeat="user in users">
      <span>{{user.name}}</span>
      <p>{{user.about_me}}</p>
    </li>
  </ul>
</div>

Now as we can see about_me contains \n (new line). But angular does not parse it, and it treats it as a string and we do not see line break in the browser.

In angular, we can create a custom filter to overcome this problem. Our custom filter will use the $sce angular service.

We will be modifying our js file like this

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

testApp.controller('testController', function ($scope) {
	$scope.users = [
	{
		'name' : 'Rohit',
		'about_me' : 'I am optimistic.'
	},
	{
		'name' : 'Shaun',
		'about_me': 'I am a sportsman. I live in Us. I like to go for long drives'
	},
	{
		'name' : 'Amit',
		'about_me' : 'I am Amit, i belong to mumbai.\n I work on AngularJS'
	}
	];
	
	angular.forEach($scope.users, function (key) {
		key.about_me = key.about_me.replace(/\n/g, '<br/>');
	});
});

testApp.filter('unsafe', function($sce) {
	return function(val) {
		return $sce.trustAsHtml(val);
	};
});

First of all we converted all the /n characters to <br/> tags, because browser do not understand /n character.

And we created a filter named 'unsafe' which will be used in the view to give a line break for /n characters which have been converted to <br/> as per our code.

Now we will use this filter in our view with ng-bind-html directive to display about_me attribute.

<div ng-app="testApp" ng-controller="testController">
	<ul>
		<li ng-repeat="user in users">
			<span>{{user.name}}</span>
			<p ng-bind-html="user.about_me | unsafe"></p>
		 </li>
	</ul>
</div>

And now this filter will treat the /n character as the new line character in our view.