title: angularJs shift table item index to up or down
body: <p>I have a table where I would like to change the order or rows by moving an item Up or Down. The element select here(T17180054) with index 3 should move up and have a new index of 2 and keep the selection preferably.</p>
  
  <p><a href="https://i.stack.imgur.com/nSYPe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nSYPe.png" alt="enter image description here"></a></p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;table st-safe-src="flow3.dataSet" st-table="flow3.displayed" class="table table-striped"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th st-sort="method"&gt;Method&lt;/th&gt;
              &lt;th st-sort="sample"&gt;Sample&lt;/th&gt;
              &lt;th st-sort="parameters"&gt;Parameters&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody ui-sortable ng-model="flow3.displayed"&gt;
          &lt;tr ng-repeat="row in flow3.displayed track by $index" style="cursor: move;" 
              ng-click="row.selected = !row.selected; flow3.selectRow($event, row, index)" 
              ng-class="{success: row.selected}"&gt;&gt;
              &lt;td&gt;{{row.method.name}}&lt;/td&gt;
              &lt;td&gt;{{row.sample}}&lt;/td&gt;
              &lt;td&gt;
                  &lt;span ng-repeat="parameter in row.parameters"&gt;   
                      {{parameter.methodInputParameter.name}} : {{parameter.value}}&lt;br/&gt;&lt;/span&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;button type="button" ng-click="flow3.removeItem(row)"
                      class="btn btn-danger btn-sm btn-round pull-right"
                      ng-disabled="flow3.confirmDisabled"&gt;
                          &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This is my two Up and Down buttons</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-6"&gt;
          &lt;div class="btn btn-info btn-lg btn-full-width"&gt;
              &lt;span class="glyphicon glyphicon-menu-up" ng-click="flow3.moveItemUp();"&gt;&lt;/span&gt; Up
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
          &lt;div class="btn btn-info btn-lg btn-full-width"&gt;
              &lt;span class="glyphicon glyphicon-menu-down" ng-click="flow3.moveItemDown();"&gt;&lt;/span&gt; Down
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my JS : 
  I have tried to use the splice method by I had wrong results each time.
  Is there a better alternative?</p>
  
  <pre><code>flow3.moveItemDown = function moveItemDown() {
      var index = flow3.dataSet.indexOf(flow3.selectedItem);
  
      if(index == 0) {
          return;
      } else {
          flow3.dataSet.splice(?, ?, ? , ?)
      }
  }
  </code></pre>