title: angular js bootstrap ng-repeat behaving wierd - drag drop not working
body: <p>I am trying to display some data as widgets inside ng-repeat but angular is behaving wierd. I don't seem to understand what is causing this. The HTML where I am trying to put ng-repeat is this.</p>
  
  <pre><code>&lt;div class="span3 widget-container-span"&gt;
                                  &lt;div class="widget-box"&gt;
  
                                      &lt;div class="widget-header widget-header-small header-color-dark"&gt;
                                          &lt;h6 class="smaller"&gt;{{ me.head }}&lt;/h6&gt;
  
                                          &lt;div class="widget-toolbar no-border"&gt;
                                              &lt;label&gt;
                                                  &lt;input type="checkbox" class="ace ace-switch ace-switch-3" /&gt;
                                                  &lt;span class="lbl"&gt;&lt;/span&gt;
                                              &lt;/label&gt;
                                          &lt;/div&gt;
  
                                          &lt;div class="widget-toolbar"&gt;
                                              &lt;span class="label label-warning"&gt;
                                                  1.2%
                                                  &lt;i class="icon-arrow-down"&gt;&lt;/i&gt;
                                              &lt;/span&gt;
                                              &lt;span class="badge badge-info"&gt;{{ me.label }}&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="widget-body"&gt;
                                          &lt;div class="widget-main"&gt;
                                              &lt;div class="alert alert-info"&gt;
                                                  {{ me.desc }}
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt; &lt;!-- end widget box--&gt;
                              &lt;/div&gt;&lt;!-- end span3 widget container--&gt;
  </code></pre>
  
  <p>If I put ng-repeat on the first div (span3 widget-container-span), the widget dragging does not work. <img src="https://i.stack.imgur.com/D5fr6.png" alt="widget container dragging not woking"></p>
  
  <p>If I put the ng-repeat in second div (div class = "widget box"), drag and drop capability works but boxes come vertically stacked not horizontally and spacing between them is uncounted. Its like a column drag and drop. <img src="https://i.stack.imgur.com/WvKZS.png" alt="widget container drag working but only vertical"></p>
  
  <p>My guess - Container div stops to work when use angular ng-repeat.</p>
  
  <p>Please guide what I am missing.</p>
  
  <p>P.S. I am using partials.</p>