AngularJS moving items between two select list

Question

I am trying to move items between two select lists using the code below, but items are not moved from the availableClients list to selectedClients lists, so can someone please check the code below and let me know what I am missing here? Thanks

  <div ng-app>
  <div ng-controller="testCtrl">

            <label for="aclients">Available Clients</label>                                
            <select size="5" multiple ng-model="available" ng-options="client.id as client.Name for client in clientsList" style="width: 400px"></select>         

            <input id="moveright" type="button" value="Add Client" ng-click="moveItem(available[0], availableclients,selectedclients)" />
            <input id="moverightall" type="button" value="Add All Clients" ng-click="moveAll(availableclients,selectedclients)" />
            <input id="move left" type="button" value="Remove Client" ng-click="moveItem(selected[0], selectedclients,availableclients)" />    
            <input id="moveleftall" type="button" value="Remove All Clients" ng-click="moveAll(availableclients,selectedclients)" />

            <label for="sclients">Selected Clients</label>                                                    
            <select size="5" multiple ng-model="selected" ng-options="client.id as client.Name for client in selectedclients" style="width: 400px"></select>
            <div>Selected Clients IDs: {{selectedclients}}</div>           

  </div>
  </div>

Controller:

  app.controller('testCtrl',
        function testCtrl($scope, clientsService){


   $scope.clientsList = clientsService.getClientsList().then(
            function(response){
               $scope.clientsList = response;
            },
            function(status){
               console.log(status);
            }
    );              

    $scope.moveItem = function(item, from, to) {

        console.log('Move item   Item: '+item+' From:: '+from+' To:: '+to);
        //Here from is returned as blank and to as undefined

        var idx=from.indexOf(item);
        if (idx != -1) {
            from.splice(idx, 1);
            to.push(item);      
        }
    };
    $scope.moveAll = function(from, to) {

        console.log('Move all  From:: '+from+' To:: '+to);
        //Here from is returned as blank and to as undefined

        angular.forEach(from, function(item) {
            to.push(item);
        });
        from.length = 0;
    };                

    $scope.availableclients = [];                
    $scope.selectedclients = [];                                


  });  

Answer 1

There are several small problems in your template:

• You're moving objects from availableclients to selectedclients, but the first select displays options from clientsList, and not from availableclients

• You're moving IDs rather than objects. Your ng-options should simply be

  client as client.name for client in availableclients
  

• Your remove all button moves from available to selected, instead of moving from selected to available.

Here is a working plunkr: http://plnkr.co/edit/RYEmpkBjQStoCfgpWPEK?p=preview

<label for="aclients">Available Clients</label>                                
<select size="5" multiple ng-model="available" ng-options="client as client.name for client in availableclients" style="width: 400px"></select>         

<input id="moveright" type="button" value="Add Client" ng-click="moveItem(available[0], availableclients,selectedclients)" />
<input id="moverightall" type="button" value="Add All Clients" ng-click="moveAll(availableclients,selectedclients)" />
<input id="move left" type="button" value="Remove Client" ng-click="moveItem(selected[0], selectedclients,availableclients)" />    
<input id="moveleftall" type="button" value="Remove All Clients" ng-click="moveAll(selectedclients,availableclients)" />

<label for="sclients">Selected Clients</label>                                                    
<select size="5" multiple ng-model="selected" ng-options="client as client.name for client in selectedclients" style="width: 400px"></select>