title: How to change position on a selected table
body: <p>I'm trying to make a selectable table. Before changing position in a row, that row has to be selectable.</p>
  
  <p>How can I do that?</p>
  
  <p>Here is what I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module("tableMoveUpDown",[]).component("tableMoveUpDown", {
   templateUrl: "./js/componente/table-move-up-down/table-move-up-down.template.html",
   controller: function($scope){
          $scope.items = [
              { title: "Alvaro" },
              { title: "Juan" },
              { title: "Pedro" },
              { title: "David" },
              { title: "Walter" },
          ];
  
          var move = function (origin, destination) {
              var temp = $scope.items[destination];
              $scope.items[destination] = $scope.items[origin];
              $scope.items[origin] = temp;
          };
  
          $scope.moveUp = function(index){
              move(index, index - 1);
          };
  
          $scope.moveDown = function(index){
              move(index, index + 1);
          };
      }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  
    &lt;table class="table table-bordered table-striped table-hover table-condensed"&gt;
      &lt;thead&gt;&lt;th&gt;Index&lt;/th&gt;&lt;th&gt;Amigos&lt;/th&gt;&lt;th&gt;Función Subir&lt;/th&gt;&lt;th&gt;Función Bajar&lt;/th&gt;&lt;/thead&gt;
      &lt;tr ng-repeat="item in items"&gt;
        &lt;td&gt;{{$index}}&lt;/td&gt;
        &lt;td&gt;{{item.title}}&lt;/td&gt;
        &lt;td&gt;&lt;span ng-show="!$first" ng-click="moveUp($index)"
                  class="glyphicon glyphicon-arrow-up"&gt;Subir&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span ng-show="!$last" ng-click="moveDown($index)"
                  class="glyphicon glyphicon-arrow-down"&gt;Bajar&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>