How can I move table data from one tabe to other table using angularjs

Question

I have two table i want to move that one table data to other table. i have four button right, allright and left, allleft.

Right btn:after i click that right btn checked row only move to left side table. AllRight btn:after i click that allright btn all row move to left side table.

leftbtn:after i click that left btn checked row only move to right side table. Allleft btn:after i click that allleft btn all row move to right side table.

and finally if i click that done btn i want to show all firstname with close btn.

I have code same script copied from other funtionality but it s not working.please can u edit my code.

link: https://jsfiddle.net/rhwa1t9c/2/

    $scope.SelectedListItems = [[]]; 
    $scope.SelectedAvailItems=[];
    $scope.btnRight = function () {
                //move selected.
                angular.forEach($scope.SelectedAvailItems, function (value, key) {
                    this.push(value);
                }, $scope.SelectedListItems[$scope.selectemailIndex]);
                //remove the ones that were moved.
                angular.forEach($scope.SelectedAvailItems, function (value, key) {
                    for (var i = $scope.AvailableListItems[$scope.selectemailIndex].length - 1; i >= 0; i--) {
                        if ($scope.AvailableListItems[$scope.selectemailIndex][i].email == value.email) {
                            $scope.AvailableListItems[$scope.selectemailIndex].splice(i, 1);
                        }
                    }
                });
                $scope.SelectedAvailItems = []; 
            };

            $scope.btnAllRight = function () {
                //move all.  angular.forEach($scope.AvailableListItems[$scope.selectemailIndex], function (value, key) {
                    this.push(value);
                }, $scope.SelectedListItems[$scope.selectemailIndex]);

                //remove the ones that were moved from the source.       
                for (var i = $scope.AvailableListItems[$scope.selectemailIndex].length - 1; i >= 0; i--) {
                    $scope.AvailableListItems[$scope.selectemailIndex].splice(i, 1);
                }

            };

            $scope.btnLeft = function () {
                //move selected.
                angular.forEach($scope.SelectedSelectedListItems, function (value, key) {
                    this.push(value);
                }, $scope.AvailableListItems[$scope.selectemailIndex]);

                //remove the ones that were moved from the source container.
                angular.forEach($scope.SelectedSelectedListItems, function (value, key) {
                    for (var i = $scope.SelectedListItems[$scope.selectemailIndex].length - 1; i >= 0; i--) {
                        if ($scope.SelectedListItems[$scope.selectemailIndex][i].email == value.email) {
                            $scope.SelectedListItems[$scope.selectemailIndex].splice(i, 1);
                        }
                    }
                });
                $scope.SelectedSelectedListItems = [];

            };

            $scope.btnAllLeft = function () {

                //move over all items
                angular.forEach($scope.SelectedListItems[$scope.selectemailIndex], function (value, key) {
                    this.push(value);
                }, $scope.AvailableListItems[$scope.selectemailIndex]);

                //remove the ones that were moved from the source.           
                for (var i = $scope.SelectedListItems[$scope.selectemailIndex].length - 1; i >= 0; i--) {
                    $scope.SelectedListItems[$scope.selectemailIndex].splice(i, 1);
                }
                $scope.SelectedSelectedListItems = [];

            };


            $scope.done = function(){
                $rootScope.userData = $scope.SelectedListItemsfistname;
                $tuxModalInstance.close();

            };

Answer 1

I think the best way to make use of angularjs is doing total data driven coding.Your table should be created by an array with ng-repeat instead of the static code. so you can just move the selected data from left to right or right to left,and never need concerning the element.