AngularJS Получить выделение текста и добавить HTML для начала и конца выделения

Имейте небольшую дилемму. Я создаю текстовый редактор в угловых js. Проблема, которая у меня есть, когда пользователь выбирает часть текста в абзаце или заголовке, мне нужно изменить стиль этой части текста на полужирный/курсивный и т.д.

Поэтому в основном мне нужно обернуть выделенный текст в <strong></strong> или <em></em>.

Plunker

У меня есть директива

editorApp.directive('watchSelection', function() {
   return function(scope, elem) {
       elem.on('mouseup', function() {
           scope.startPosition = elem[0].selectionStart;
           scope.endPosition = elem[0].selectionEnd;
           //    scope.selected = elem[0].value.substring(start, end);
           scope.$apply();
       });
   };
});

Это делает выбор текста его началом и окончанием. При нажатии кнопки мне нужно обернуть этот выбор в определенные теги, которые я надеюсь выполнить с помощью этой функции:

$scope.boldText = function(startPosition, endPosition) {
        $scope.start = startPosition;
        $scope.end = endPosition;
        var htmlStart = angular.element('<strong>');
        var htmlEnd = angular.element('</strong>');

        $scope.start.append(htmlStart);
        $scope.end.append(htmlEnd);
    };

Я относительно новый для углового, и я, возможно, взял больше укуса, чем я могу справиться :)

Проблема в том, что я не могу получить выделение, чтобы обернуть внутри них теги.