tinymce in mdDialog

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="angular-material@1.1.0" data-semver="1.1.0" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
    <script>
    document.write('<base href="' + document.location + '" />');
  </script>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    
    <script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="http://code.angularjs.org/1.5.5/angular-animate.js"></script>
    <script data-require="angular-aria@1.5.5" data-semver="1.5.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script data-require="angular-messages@1.5.5" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script data-require="angular-material@1.1.0" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
    <script src="tinymce.js"></script>
		
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <md-button ng-click="addMoreInfoFunction($event)">OPEN DIALOG</md-button>
<script type="text/ng-template" id="addMoreInfo.tmpl.html">
  <md-dialog aria-label="Add More Info">
      <form name="addMoreInfoForm" novalidate>
          <md-dialog-content>
              <div class="md-dialog-content">
                  <textarea class="textArea" ui-tinymce="tinymceOptions" ng-model="additionalDescription">
Tell us about the event</textarea>
              </div>
          </md-dialog-content>
      </form>
  </md-dialog>
</script>
  </body>

</html>

var app = angular.module('plunker', ['ngMaterial', 'ui.tinymce']);

app.controller('MainCtrl', function($scope, $mdDialog) {
  $scope.addMoreInfoFunction = function (event) {
      $mdDialog.show({
        controller: ['$scope', '$mdDialog', DialogAddMoreInfoController],
        templateUrl: 'addMoreInfo.tmpl.html',
        parent: angular.element(document.body),
        targetEvent: event,
        clickOutsideToClose: true
      });
    };
});

function DialogAddMoreInfoController($scope, $mdDialog) {
  $scope.hide = function () {
    $mdDialog.hide();
  };
  $scope.cancel = function () {
    $mdDialog.cancel();
  };
  $scope.addMoreInfoFormSubmit = function () {
    $mdDialog.hide();
  };
  
  $scope.tinymceOptions = {
        selector: 'textarea',
        height: 200,
        theme: 'modern',
        plugins: [
          'advlist autolink lists link image charmap print preview hr anchor pagebreak',
          'searchreplace wordcount visualblocks visualchars code fullscreen',
          'insertdatetime media nonbreaking save table contextmenu directionality',
          'emoticons template paste textcolor colorpicker textpattern imagetools codesample'
        ],
        toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media',
        toolbar2: 'print preview  | forecolor backcolor emoticons | codesample',
        image_advtab: true,
        templates: [
          { title: 'Test template 1', content: 'Test 1' },
          { title: 'Test template 2', content: 'Test 2' }
        ],
      }

}

/**
 * Binds a TinyMCE widget to <textarea> elements.
 */
angular.module('ui.tinymce', [])
  .value('uiTinymceConfig', {})
  .directive('uiTinymce', ['uiTinymceConfig', '$timeout',
    function(uiTinymceConfig, $timeout) {
      uiTinymceConfig = uiTinymceConfig || {};
      var generatedIds = 0;
      return {
        require: '?ngModel',
        priority: 1,
        link: function(scope, elm, attrs, ngModel) {
          var expression, options, tinyInstance;
          // generate an ID if not present
          if (!attrs.id) {
            attrs.$set('id', 'uiTinymce' + generatedIds++);
          }
          options = {
            // Update model when calling setContent (such as from the source editor popup)
            setup: function(ed) {
              ed.on('init', function(args) {
                ngModel.$render();
              });
              // Update model on button click
              ed.on('ExecCommand', function(e) {
                ed.save();
                ngModel.$setViewValue(elm.val());
                if (!scope.$$phase) {
                  scope.$apply();
                }
              });
              // Update model on keypress
              ed.on('KeyUp', function(e) {
                console.log(ed.isDirty());
                ed.save();
                console.log('elm.val()', elm.val());
                ngModel.$setViewValue(elm.val());
                if (!scope.$$phase) {
                  scope.$apply();
                }
              });
            },
            mode: 'exact',
            elements: attrs.id
          };
          if (attrs.uiTinymce) {
            expression = scope.$eval(attrs.uiTinymce);
          } else {
            expression = {};
          }
          angular.extend(options, uiTinymceConfig, expression);
          setTimeout(function() {
            tinymce.init(options);
          });


          //$timeout(function() {
            ngModel.$render = function tinyMceRender() {
              console.log("render");
              if (!tinyInstance) {
                tinyInstance = tinymce.get(attrs.id);
              }
              console.log('missing tinyInstance! got ', tinyInstance);
              if (tinyInstance) {
                tinyInstance.setContent(ngModel.$viewValue || '');
              }
            };
            console.log('tinymce', ngModel);
          //});
        }
      };
    }
  ]);