title: AngularJS moving items between two select list
body: <p>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</p>
  
  <pre><code>  &lt;div ng-app&gt;
    &lt;div ng-controller="testCtrl"&gt;
  
              &lt;label for="aclients"&gt;Available Clients&lt;/label&gt;                                
              &lt;select size="5" multiple ng-model="available" ng-options="client.id as client.Name for client in clientsList" style="width: 400px"&gt;&lt;/select&gt;         
  
              &lt;input id="moveright" type="button" value="Add Client" ng-click="moveItem(available[0], availableclients,selectedclients)" /&gt;
              &lt;input id="moverightall" type="button" value="Add All Clients" ng-click="moveAll(availableclients,selectedclients)" /&gt;
              &lt;input id="move left" type="button" value="Remove Client" ng-click="moveItem(selected[0], selectedclients,availableclients)" /&gt;    
              &lt;input id="moveleftall" type="button" value="Remove All Clients" ng-click="moveAll(availableclients,selectedclients)" /&gt;
  
              &lt;label for="sclients"&gt;Selected Clients&lt;/label&gt;                                                    
              &lt;select size="5" multiple ng-model="selected" ng-options="client.id as client.Name for client in selectedclients" style="width: 400px"&gt;&lt;/select&gt;
              &lt;div&gt;Selected Clients IDs: {{selectedclients}}&lt;/div&gt;           
  
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>  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 = [];                                
  
  
    });  
  </code></pre>