title: Sort or Rearrange Rows of a table in angularjs (drag and drop)
body: <p>I wanted to have the functionality of rearranging rows in a table (sorting rows using drag and drop). 
  <strong>And the index of the row arrangement should also change in the model.</strong></p>
  
  <p>How can I do something similar to this : <a href="http://jsfiddle.net/tzYbU/1162/" rel="nofollow noreferrer">http://jsfiddle.net/tzYbU/1162/</a>
  using Angular Directive?</p>
  
  <p>I am generating table as :</p>
  
  <pre><code>&lt;table id="sort" class="table table-striped table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="header-color-green"&gt;&lt;/th&gt;
        &lt;th ng-repeat="titles in Rules.Titles"&gt;{{titles.title}}&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody ng-repeat="rule in Rules.data"&gt;
      &lt;tr&gt;
        &lt;td class="center"&gt;&lt;span&gt;{{rule.ruleSeq}}&lt;/span&gt;&lt;/td&gt;
        &lt;td ng-repeat="data in rule.ruleData"&gt;{{statusArr[data.value]}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>