title: How to properly copy/clone DOM element and then paste/insert it as HTML element in Angular.js?
body: <p>So I've got such big webapp that uses Angular.js.<br />Small part of this webapp has sidebar which, currently, displays two div containers: one that shows user profile stats (thumbnail, reputation, messages, some skills .etc) and second which is slider (angular-ui) carousel showing some images.</p>
  
  <p>What I want to do, is to clone this whole skills sidebar and paste this cloned DOM object into slider as another slide, but converted into HTML element.</p>
  
  <p>Here's code of this slider:</p>
  
  <pre><code>&lt;div id="scrolling-sidebar"&gt;
    &lt;carousel interval="myInterval"&gt;
      &lt;slide ng-repeat="slide in slides" active="slide.active"&gt;
        &lt;a href="{{slide.link}}" ng-if="$index != 1"&gt;
          &lt;img ng-src="{{slide.image}}" /&gt;
        &lt;/a&gt;
        &lt;a href="{{slide.link}}" ng-bind-html="slide.content"&gt;&lt;/a&gt;
      &lt;/slide&gt;
    &lt;/carousel&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's part of this whole sidebar controller .coffee script:</p>
  
  <pre><code>'use strict'
  
  angular.module('someApp')
    .controller 'SidebarCtrl', ($scope, $modal, $http, $location, settings) -&gt;
  
  
      $scope.myInterval = 5000
      $scope.slides = [
          {
              image: "/images/_getpro_banners1.png"
              link: "#/get-pro"
          }
          {
              content: $("#profile-skills-sidebar").clone()
              link: "#/get-pro" 
          }
          {
              image: "/images/_getpro_banners2.png"
              link: "#/get-pro"
          }
          {
              image: "/images/_getpro_banners3.png"
              link: "#/get-noticed"
          }
          {
              image: "/images/_getpro_banners4.png"
              link: "#/get-pro"
          }
          {
              image: "/images/_getpro_banners5.png"
              link: "#/get-pro"
          }
          {
              image: "/images/_getpro_banners6.png"
              link: "#/get-pro"
          }
          {
              image: "/images/_getpro_banners7.png"
              link: "#/get-pro"
          }
      ]
      console.log "Cloned dom element: " + $scope.slides[1].content[0].html()
  </code></pre>
  
  <p>When running this webapp (basically refreshing webpage), I get following error in developer console: <code>TypeError: Cannot read property 'html' at new &lt;anonymous&gt; (http://127.0.0.1:9000/scripts/controllers/sidebar.js:39:69) of undefined</code> which corresponds to this line <code>console.log("Cloned dom element: " + $scope.slides[1].content[0].html());</code> in compiled to js sidebar.js file.</p>
  
  <p>So this basically means, that this line <code>content: $("#profile-skills-sidebar").clone()</code> doesn't work like intended - it looks like the DOM element isn't even cloned.</p>
  
  <p>Thus, second slide is <code>[object Object]</code> instead copied skills bar.</p>
  
  <p>I got jQuery loaded in  (using bower and grunt for frontend development), I can use in while in browser devtools:</p>
  
  <pre><code>&gt; var skills = $("#profile-skills-sidebar");
  &lt; undefined
  &gt; skills
  &lt; [&lt;div id="profile-skills-sidebar"&gt;…&lt;/div&gt;]
  &gt; skills[0]
  &lt; &lt;div id="profile-skills-sidebar"&gt;…&lt;/div&gt;
  </code></pre>
  
  <p>I tried creating directive in .coffee script:</p>
  
  <pre><code>.directive "skillsBarSlide", ['$compile', ($scope, $compile, $timeout) -&gt;
      restrict: 'A'
      #template: '&lt;a href="{{slide.link}}"&gt;&lt;/a&gt;'
      link: (scope, elem, attrs) -&gt;
          $timeout( -&gt; 
              scope.slides[1].content = angular.element($("#profile-skills-sidebar")).copy()
              element.append($compile(scope.slides[1].content)(scope))
          )
    ]
  </code></pre>
  
  <p>but it didn't worked.</p>
  
  <p>So what steps precisely I have to make to:<br />
  1. clone needed DOM element<br />
  2. Probably convert it to string of HTML elements (because cloned DOM will be an object)<br />
  3. Insert into desired div container</p>
  
  <p>I know that I need here probably $sce, $compile maybe $sanitize (I've read the angular docs a bit), but I'm fresh to angular, didn't understood it well yet.</p>
  
  <p>Thanks for eventual help.</p>