title: Angularjs - cloned html is losing $scope
body: <p>I have an AngularJS wit a &lt;nav&gt; element that is used for desktops:</p>
  
  <pre><code>&lt;nav ng-controller="MainNavController" class="navbar navbar-default" role="navigation"&gt; 
  </code></pre>
  
  <p>The problem is that for mobile, I need to implement an off-canvas navigation where the whole body is shifted over and the nav appears to slide in from the right.</p>
  
  <p>To do this, instead of duplicating the entire nav on the page in the initial html payload, I thought I'd do this by using jQuery.clone().</p>
  
  <p>However, when I do this, I'm losing the $scope context.  The ng-click functions in my copied-over anchors are not being fired.</p>
  
  <p>I'm copying these items over in a directive and I tried calling scope.$apply() but it didn't work.</p>
  
  <pre><code>$(".prenav &gt; *").clone().appendTo($(".off-canvas__nav"));
  scope.$apply();
  </code></pre>
  
  <p>It seems from my reading on this that I need to somehow call a $compile on this new html, but I'm not sure how/when to do this in my current setup.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>-- Scott</p>