Kendo UI editor angular with real time autoupdate with binding on keyup

<!DOCTYPE html>
<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/splitter/angular">
  <style>
    html {
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .errorNarrative {
      color: red !important;
      font-weight: bolder;
    }
  </style>
  </style>
  <title></title>
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />

  <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2015.2.902/js/angular.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="example" ng-app="KendoDemos">
    <div class="demo-section k-header" ng-controller="MyCtrl">

      <textarea kendo-editor style="height:410px" k-options="editorOptions" data-ng-model="narrativeText" k-tools="cbjN.editorCommands">

      </textarea>

      <div id="narrativeDetails">
        <span data-ng-if="narrativeTextLength > 0" data-ng-class="{'errorNarrative': narrativeTextLength > maximumLimit}">
          {{narrativeTextLength}} of {{maximumLimit}} characters.</span>
        <BR><span data-ng-if="updatedBy.length > 0">Last Edited </span>
        <span data-ng-if="updatedBy.length > 0"> by {{updatedBy}}</span>
        <span> at {{lastActivityDate | date:'yyyy-MM-dd HH:mm:ss sss'}}</span>
      </div>
      <BR>
        Output Text: <div>{{changeWhenTyped}}</div>
    </div>
  </div>

  <script>
    angular.module("KendoDemos", ["kendo.directives"])
      .controller("MyCtrl", function($scope) {
        $scope.narrativeText = "starting text";
        $scope.narrativeTextLength = $scope.narrativeText.length;
        $scope.lastActivityDate = "";
        $scope.maximumLimit = "25";
        $scope.updatedBy = "Chris Warin";
        $scope.editorOptions = {
          "keyup": updateText,
          "execute": updateText
        };
       
        function updateText(e) {
          $scope.changeWhenTyped = e.sender.value();
          $scope.lastActivityDate = new Date();
          $scope.narrativeTextLength = trimHTML($scope.changeWhenTyped).length;
          $scope.$digest();
        }

        function trimHTML(html) {
          if (html) {
            var text = $("<div>").html(html).text();
            return $.trim(text);
          }
          return "";
        }
      })
  </script>


</body>

</html>

// Code goes here

/* Styles go here */