title: ng-repeat and jquery ui sortable
body: <p>I've an ng-repeat in my angular template which needs to be sortable. I'm using jQuery-ui's Sortable to implement it. </p>
  
  <p>The JS:</p>
  
  <pre><code>$scope.data = [{"key":123,"val":"a"},
  {"key":124,"val":"b"},
  {"key":125,"val":"c"}];
  
  $(".sortable").sortable();
  </code></pre>
  
  <p>The template:</p>
  
  <pre><code>&lt;div class="sortable"&gt; 
      &lt;div ng-repeat="sub in data" &gt;
          {{sub.key}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works perfectly fine, and I can drag and drop the elements.
  However, when a ng-repeat is nested within another, it doesn't work; I'm unable to drag anything. On using Chrome inspector, I see that the class 'ui-sortable' is not added to any element at all.</p>
  
  <p>The JS:</p>
  
  <pre><code>$scope.subJson = [{"name":"MS1","slides":[{"title":"Title1"},{"title":"Title2"}]},{"name":"MS2","slides":[{"title":"Title3"},{"title":"Title4"}]}];
  
  $(".sortable").sortable();
  </code></pre>
  
  <p>The template:</p>
  
  <pre><code>&lt;div&gt; 
      &lt;div ng-repeat="sub in subJson" &gt;
          {{sub.name}}
          &lt;div class="sortable"&gt;
              &lt;div ng-repeat="slide in sub.slides" &gt;
                  {{slide.title}}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Why does this happen? Is there a solution?</p>