JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="TestCtrl">
    <div class="textwrapper" ng-bind-html-unsafe="model|newline2br" ng-init="showText=true" ng-show="showText" ng-mouseleave="showText = false">
    </div>
</div>

JavaScript

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

myApp.filter('capitalize', function() {
    return function(input, scope) {
        return input.substring(0,1).toUpperCase()+input.substring(1);
    }
});


myApp.filter('newline2br', function () {
    return function (text) {
        return String(text).replace(/\n/g, '<br />');
    }
});

function TestCtrl ($scope) {
    $scope.model = "This is a text with \n newlines. It has a \n few of them.\n They should be nicely displayed in the front end.\n Thanks.";
};