title: How to add some HTML code to the DOM with angularJS templates and make AngularJS to interpolate them?
body: <p>I have some some service. I wanna to debug it and see state of variables in this service. My code is below (explanation below the code):</p>
  
  <pre><code>module.factory('Data', function () {
      var current = [], unlocked = [], all = [];
  
      return {
          current: current,
          unlocked: unlocked,
          total: all
      }
  });
  module.controller('debugPlaneController', ['$scope', 'Data', function ($scope, data) {
      $scope.data = data;
  }]);
  module.factory('someService', ['Data', function (data) {
      var initDebugMode = function () {
          var style = "style='width: 500px; height: 100px; background-color: #ccc;";
          var template = "
              &lt;div "+style+" ng-controller='debugPlaneController'&gt;
                  &lt;p&gt;data.current = {{ data.current }}&lt;/p&gt;
                  &lt;p&gt;data.total = {{ data.total }}&lt;/p&gt;
                  &lt;p&gt;data.unlocked= {{ data.unlocked }}&lt;/p&gt;
              &lt;/div&gt;
          ";
          $(".someClass &gt; .childClassOfSomeClass").append(template);
      };
      // some more methods, for example
      var push = function (name) {
          data.current.push(name);
          data.all.push(name);
      }
      // etc
      return {
          initDebug: initDebugMode,
          push: push
          // some more methods
      }
  }]);
  
  module.controller('mainController', ['$scope', 'someService', function($scope, someService) {
      someService.initDebug();
      someService.push('lala');
  });
  </code></pre>
  
  <p>So, I have some app with controller <code>mainController</code>. I want to use service <code>someService</code> in it. I am using <code>push</code> method. This method pushes data from <code>name</code> argument to <code>total</code> and <code>current</code> arrays of Data service <code>Data</code>. As you see, I called method <code>initDebug()</code> from <code>mainController</code>, so I want debug window to appear on my screen. I want to show state of arrays <code>current</code>, <code>total</code> and <code>unlocked</code> of <code>Data</code> data-service. </p>
  
  <p>Actually, window appears on screen, but I see this on it:</p>
  
  <pre><code>data.current = {{ data.current }}
  data.total = {{ data.total }}
  data.all = {{ data.all }}
  </code></pre>
  
  <p>So, AngularJS templates wasn't interpolated. How I can make them interpolating + I need live update of them in this block (like angularJS actually do).</p>
  
  <h2>Update</h2>
  
  <p>Using $compile.</p>
  
  <p>So I need to change my <code>initDebugMode</code> function this way?: </p>
  
  <pre><code>module.factory('someService', ['Data', '$compile', function (data, $compile) {
      var initDebugMode = function () {
          var style = "style='width: 500px; height: 100px; background-color: #ccc;";
          var scopeImitation = { data: data };
  
          var template = "
              &lt;div "+style+" ng-controller='debugPlaneController'&gt;
                  &lt;p&gt;data.current = {{ data.current }}&lt;/p&gt;
                  &lt;p&gt;data.total = {{ data.total }}&lt;/p&gt;
                  &lt;p&gt;data.unlocked= {{ data.unlocked }}&lt;/p&gt;
              &lt;/div&gt;
          ";
          $compile(template)(scopeImitation);
          $(".someClass &gt; .childClassOfSomeClass").append(template);
      };
  // etc...
  ]);
  </code></pre>
  
  <p>How exactly passing variable to 2nd brackets in <code>$compile</code> service works? I used this correctly?</p>