Angular $compile to string for code generation

Question

I am building a generic code generator using Angular

I have dynamic data structures & templates that are designed to build different types of code. HTML, C#, SQL, Javascript, CSS, Ruby.

I have gotten the $compile function to work as part of a directive and it injects elements in the Angular page fine.

What I really need though is for the generation to output a simple string.

Every article I read talks about taking the compiled output and injecting into the angular pipeline which is not my requirement.

Does anyone know who I can extract a simple string out of a compiled template which has been merged with my scope data?

angular.module('workibleServerApp')
  .directive('generateDynamicTemplate', ['$compile', function ($compile) {
      return {
          scope: true,
          data: '=',
          rawTemplate: '=',
          restrict: 'E',
          link: function (scope, element, attrs) {

              scope.$watchGroup([attrs.data, attrs.rawTemplate], function (newValues) {

                  scope.data = newValues[0];
                  var rawTemplate = newValues[1];

                  element.html('');
                  //element.html('<textarea id="outputRaw" name="outputRaw" class="form-control" rows="12">');

                  if (!_.isEmpty(scope.data) && !_.isEmpty(rawTemplate)) {
                      var tl = angular.element(rawTemplate);
                      var compiled = $compile(tl)(scope);
                      element.append(compiled);

                      scope.convertToString = compiled;
                  }
                  //element.append('</textarea>');
              });


          }
      };
  }]);

convertToString does not get populated

              <div class="col-md-6">
                    <h6><strong>Output</strong></h6>
                    <!-- This renders output from the directive, all GOOD -->
                    <generate-dynamic-template data="model.richData" raw-template="model.template"></generate-dynamic-template>

<!-- Neither of these work, This Does not work -->
<pre>
{{convertToString}}
</pre>
                    <textarea>{{convertToString}}</textarea>

                    <!--<textarea id="output" name="output" ng-model="model.output" rows="20" placeholder="Output" class="form-control input-sm"></textarea>-->
                </div>