title: Get rendered html from another page in directive in angular.js 1
body: <p>So my question is very tricky and non-conventional but I could not find any workaround for that.
  I have used <a href="https://github.com/Kademi/keditor" rel="nofollow noreferrer">kEditor</a>, a very powerful plugin for building template through drag and drop. The plugin was built in jquery. So I have created the directive to work with Keditor function.</p>
  
  <p>I am using this plugin as it is open source and the best I could find on internet.</p>
  
  <p>I have changed many of its coding. It provides only two tabs in side bar as in this link:
  <a href="https://rawgit.com/Kademi/keditor/master/examples/callbacks.html" rel="nofollow noreferrer">https://rawgit.com/Kademi/keditor/master/examples/callbacks.html</a></p>
  
  <p>But in my case I am trying to build an invoice using this powerful tool. 
  I have created some html and I need to insert that in to third tab as :
  <a href="https://i.stack.imgur.com/lWSOl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lWSOl.png" alt="enter image description here"></a></p>
  
  <p>In my controller I am preparing html for that:</p>
  
  <pre><code>app.controller('mainCtrl', ['$scope', '$compile', 'loaderService', function ($scope, $compile, loaderService) {
  
      $scope.init = function () {
          loaderService.getJSON().then(function (callBack) {
              $scope.invoice = callBack.data.invoice;
          });
      }
  
      $scope.templateIntegration = function () {
  
          var template = '&lt;div data-classification="invoice" data-type="component-{{invoice.invoiceNo.type}}" data-title="{{invoice.invoiceNo.label}}" data-length="{{invoice.invoiceNo.length}}" data-default-mask="{{invoice.invoiceNo.defaultMask}}" data-categories="Text;Dynamic component"&gt;' +
                          '&lt;p&gt;{{invoice.invoiceNo.value}}&lt;/p&gt;' +
                          '&lt;/div&gt;';
  
          template += '&lt;div data-classification="invoice" data-type="component-{{invoice.invoiceDate.type}}" data-title="{{invoice.invoiceNo.label}}" data-default-mask="{{invoice.invoiceNo.label}}" data-categories="Text;Dynamic component"&gt;' +
                      '&lt;p&gt;{{invoice.invoiceDate.value}}&lt;/p&gt;' +
                      '&lt;/div&gt;';
  
          template += '&lt;div data-classification="invoice" data-type="component-{{invoice.invoiceStatus.type}}" data-title="{{invoice.invoiceStatus.label}}" data-length="{{invoice.invoiceStatus.length}}" data-categories="Text;Dynamic component"&gt;' +
                      '&lt;p&gt;{{invoice.invoiceStatus.value}}&lt;/p&gt;' +
                      '&lt;/div&gt;';
  
          template += '&lt;div data-classification="invoice" data-type="component-{{invoice.customer.name.type}}" data-title="{{invoice.customer.name.label}}" data-length="{{invoice.customer.name.length}}" data-categories="Text;Dynamic component"&gt;' +
              '&lt;p&gt;{{invoice.customer.name.value}}&lt;/p&gt;' +
          '&lt;/div&gt;';
  
          template += '&lt;div data-classification="invoice" data-type="component-{{invoice.customer.address.type}}" data-title="{{invoice.customer.address.label }}" data-length="{{invoice.customer.address.length}}" data-categories="Text;Dynamic component"&gt;' +
              '&lt;p&gt;{{invoice.customer.address.value}}&lt;/p&gt;' +
          '&lt;/div&gt;';
  
          template += '&lt;div data-classification="invoice" data-type="component-{{invoice.items.type}}" data-title="{{invoice.items.label }}" data-categories="Text;Dynamic component"&gt;' +
                      '&lt;table class="table-striped table-responsive"&gt;' +
                      '&lt;thead&gt;' +
                          '&lt;tr&gt;' +
                          '&lt;th&gt;Name&lt;/th&gt;' +
                          '&lt;th&gt;Price&lt;/th&gt;' +
                          '&lt;th&gt;Tax&lt;/th&gt;' +
                          '&lt;th&gt;Quantity&lt;/th&gt;' +
                          '&lt;th&gt;Subtotal&lt;/th&gt;' +
                          '&lt;/tr&gt;' +
                      '&lt;/thead&gt;' +
                      '&lt;tbody&gt;' +
                      '&lt;tr ng-repeat="x in invoice.items.value"&gt;' +
                          '&lt;td&gt;{{x.name}}&lt;/td&gt;' +
                          '&lt;td&gt;{{x.price}}&lt;/td&gt;' +
                          '&lt;td&gt;{{x.tax}}&lt;/td&gt;' +
                          '&lt;td&gt;{{x.quantity}}&lt;/td&gt;' +
                          '&lt;td&gt;{{ (x.price + x.tax) * x.quantity }}&lt;/td&gt;' +
                      '&lt;/tr&gt;' +
                      '&lt;/tbody&gt;' +
                      '&lt;/table&gt;' +
                      '&lt;/div&gt;';
  
          //$compile()($scope)
          return template;
      }
  }
  </code></pre>
  
  <p>Here is my directive:</p>
  
  <pre><code>app.directive('headerKEditor', function () {
      return {
          link: function (scope, elem, attr) {
              elem.keditor({
                  isHeader: true,
                  invoiceTemplate: scope.templateIntegration()
              });
          }
      }
  });
  </code></pre>
  
  <p>Here is how this directive is being used:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
                      &lt;h3&gt;Repeating Header on Each Page&lt;/h3&gt;
                      &lt;div class="invoice-container" header-k-editor&gt;&lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>When I use this html in my preloaded html it shows only {{}} braces without value. I know I am late using the model in controller. But What can be the work around? I used $compile but it did not work on tables with ng-repeat.</p>