JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <div my-wbr>{{someText}}</div>
        <button ng-click="someText = 'changedToText1'">change text 1</button>
        <button ng-click="someText = 'changedToText2'">change text 2</button>
    </div>
</div>

JavaScript

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

myApp.directive('myWbr', function ($interpolate) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // get the interpolated text of HTML element
            var expression = $interpolate(element.text());

            // get new text, which has <wbr> element on every 10th position
            var addWbr = function (inputText) {
                var newText = '';
                for (var i = 0; i < inputText.length; i++) {
                    if ((i !== 0) && (i % 10 === 0)) newText += '<wbr>'; // no end tag
                    newText += inputText[i];
                }
                return newText;
            };

            scope.$watch(function (scope) {
                // replace element's content with the new one, which contains <wbr>s
                element.html(addWbr(expression(scope)));
            });
        }
    };
});

function MyCtrl($scope) {
    $scope.someText = 'someLongText';
}