Angular: method for moving between the two inside the directives

http://angularjs.org/

by manoj

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <duallist data1="data1" data2="data2">Hello {{name}}</duallist>
</div>

CSS

.list {
    float: left;
    margin: 30px;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('duallist', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            data1: '=',
            data2: '='          
        },
        template: '<div><ul class="list"><li ng-repeat="datum in data1" ng-click="move(datum, data1)">{{datum}}</li></ul> <ul class="list"><li ng-repeat="datum in data2" ng-click="move(datum, data2)">{{datum}}</li></ul></div>',
        link: function(scope, ele, attrs) {
            scope.move = function(datum, dataset) {
                if (dataset == scope.data1) {
                scope.data2.push(datum);
                dataset.splice(dataset.indexOf(datum), 1);                  
                }
                else{
                scope.data1.push(datum);
                dataset.splice(dataset.indexOf(datum), 1);    
                }     
            }
        }
    }
});
    
//myApp.factory('myService', function() {});


function MyCtrl($scope) {
    $scope.data1 = [1, 2, 3, 4, 5];
    $scope.data2 = [6, 7, 8, 9, 10];
}