如何观察TextAngular文本编辑器的内容以添加/删除元素？

Question

我已成功定制 textangular 模块，使用以下代码添加glossify按钮：

angular.module('myApp')
    .controller('ReaderCtrl', ['$scope', '$document', '$log', function ($scope, $document, $log) {
        $scope.glossList = [];
    }])
    .config(function($provide){
        $provide.decorator('taOptions', ['$delegate', function(taOptions){
            taOptions.toolbar = [
                ['gloss', 'bold', 'italics', 'redo', 'undo'],
            ];
            return taOptions; // whatever you return will be the taOptions
        }]);
        $provide.decorator('taOptions', ['taRegisterTool', '$delegate', '$log', function(taRegisterTool, taOptions, $log){
            taRegisterTool('gloss', {
                buttontext: "Gloss",
                action: function(e, elt, editorScope){
                    var selectedText = window.getSelection();
                    var  glossTag = '<strong class="gloss">'+ selectedText +'</strong>';
                    return this.$editor().wrapSelection('insertHTML', glossTag, true);
                },
                activeState: function(commonElement) {// state is detected by the HTML class 'gloss'
                    if(commonElement) return commonElement[0].className === 'gloss';
                    return false;
                },
            });
            return taOptions;
        }]);
    });

目标

我想观看文本编辑器的内容，以添加/删除标记文本（即<strong class="gloss">…</strong>中的文本包装器）。

然后动态更新范围中的列表（例如$scope.glossList）。为了对我的REST API运行HTTP请求并在我的页面中创建新元素。

问题

See Plunkr

首先，如何在编辑器内容中观察元素的添加/删除？