JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="App" ng-controller="Ctrl">
    <textarea ng-model="text" style="width:400px; height:100px;"></textarea>
    <div ng-bind-html="text | nl2br"></div>
</div>

CSS

</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.js"></script>
<style>

JavaScript

var app = angular.module('App', ['ngSanitize']);
app.controller('Ctrl', function($scope) {
    $scope.text = 'line 1\nline 2\nhtml <span>tags</span> are shown as is.';
});
app.filter('nl2br', function() {
    var span = document.createElement('span');
    return function(input) {
        if (!input) return input;
        var lines = input.split('\n');

        for (var i = 0; i < lines.length; i++) {
            span.innerText = lines[i];
            span.textContent = lines[i];
            lines[i] = span.innerHTML;
        }
        return lines.join('<br />');
    }
});