I need assistance with a feature that allows users to move rows between tables by clicking on buttons. When the 'up' button is clicked, the 2nd table row should be moved to the 1st table, and when the 'down' button is clicked, the 1st table row should be moved to the 2nd table.

Incorporating this functionality in HTML:

        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Tag Name</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="tag in vm.tags | filter: searchBar"
                    ng-init="selectedIndex = $index">
                    <td><span ng-click="vm.editTags(selectedIndex);"
                        tooltip="Click to edit tag">{{tag.name}}</span></td>
                    <td><span ng-click="vm.editTags(selectedIndex);"
                        tooltip="Click to edit tag">{{tag.status}}</span></td>
                    <td><span class="glyphicon glyphicon-remove change-color"
                        ng-click="vm.removeTag(selectedIndex)" tooltip="Delete tag">
                    </span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="top-bottom-padding col-sm-1">
        <button type="button" class="btn change-color bg-white">
            <span class="glyphicon glyphicon-arrow-down glyphicon-lg"></span>
        </button>
    </div>
    <br />
    <div class="top-bottom-padding col-sm-1">
        <button type="button" class="btn change-color bg-white">
            <span class="glyphicon glyphicon-arrow-up glyphicon-lg"></span>
        </button>
    </div>

        <div class="clear pull-right col-sm-1">
          <br/>
            <button ng-disabled="vm.selectedOrder.status == 'Activated'"
                class="pull-left btn btn-primary margin-Left"
                ng-click="vm.editStatus();">Activated</button>
            <button ng-disabled="vm.selectedOrder.status == 'Paused'"
                class="pull-left btn btn-primary margin-Left"
                ng-click="vm.editStatus();">Paused</button>
        </div>
    <div class="clear top-bottom-padding col-sm-1">
        <table class="table table-color table-bordered table-hover">
            <thead>
                <tr>
                    <th>Rotation Order</th>
                    <th>Tag Name</th>
                    <th>Status</th>
                </tr>
            </thead>
            <!-- ng-sortable - External component used for re-arranging rows of table -->
            <tbody ng-sortable="{animation:150}">
                <tr ng-repeat="orders in  vm.rotationTable"
                    ng-class="{selected : orders == vm.selectedOrder}"
                    ng-click="vm.setSelected(orders)">
                    <td>{{orders.rotationOrder}}</td>
                    <td>{{orders.tagName}}</td>
                    <td>{{orders.status}}</td>
                </tr>
            </tbody>
        </table>
</div>

Implementation in JS:-

// Insert JavaScript code here



var myApp = angular.module('myApp',[]);
  myApp.controller('tagController', ['$scope',function ($scope) {

  var vm = this;  
  vm.tags = [
        {
            "name": "Tag A",
            "status": "Activated"
        },
        {
            "name": "Tag B",
            "status": "Paused"
        },
         {
             "name": "Tag C",
             "status": "Paused"
         },
         {
             "name": "Tag D",
             "status": "Activated"
         }
  ];
  vm.rotationTable = [
      {
          "rotationOrder": "1",
          "tagName": "Tag D",
          "status":"Activated"
      },
      {
          "rotationOrder": "2",
          "tagName": "Tag E",
          "status": "Paused"
      },
      {
          "rotationOrder": "3",
          "tagName": "Tag F",
          "status": "Activated"
      }
  ]
  vm.selectedOrder = null;
  vm.setSelected = function (order) {
      vm.selectedOrder = order;
      console.log(vm.selectedOrder);
  };

  vm.editStatus = function () {
      if (vm.selectedOrder.status == "Paused")
      {
          vm.selectedOrder.status = "Activated";
      }
      else if (vm.selectedOrder.status = "Activated")
      {
          vm.selectedOrder.status = "Paused";
      }
  };

     vm.addTags = function () {
      var modalInstance = $modal.open({
          templateUrl: './views/admin/addNewTag.html',
          controller: 'addNewTagController',
          controllerAs: 'vm',
          resolve: {
              tagsData: function () {
                  return vm.tags;
              }
          }
      });
  };


  vm.editTags = function (whichTag) {
      vm.whichTag = whichTag;
      var modalInstance = $modal.open({
          templateUrl: './views/admin/updateTag.html',
          controller: 'updateTagController',
          controllerAs: 'vm',
          resolve: {
              tagsData: function () {
                  return vm.tags;
              },
              whichTag: function () {
                  return vm.whichTag;
              }
          }
      });
  };      

  vm.removeTag = function (index) {
      vm.tags.splice(index, 1);
  };

 }]);

You can view the complete code at this link:http://plnkr.co/edit/bsoTjFpJrEu3nG6cnjci?p=preview