title: How to move up and down items using angular js?
body: <p><a href="http://jsfiddle.net/Nidhin/xd3Ab/" rel="nofollow">http://jsfiddle.net/Nidhin/xd3Ab/</a></p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
   myApp.controller('MyCtrl', function($scope) {
  $scope.roles = [
      {roleId: 1, roleName: "Administrator"},
      {roleId: 2, roleName: "Super User"}
  ];
  
  $scope.user = {
      userId: 1, 
      username: "JimBob",
      roles: [$scope.roles[0]]
  };});myApp.directive('multiSelect', function($q) {return {
  restrict: 'E',
  require: 'ngModel',
  scope: {
    selectedLabel: "@",
    availableLabel: "@",
    displayAttr: "@",
    available: "=",
    model: "=ngModel"
  },
  template: '&lt;div class="multiSelect"&gt;' + 
              '&lt;div class="leftms fL "&gt;' +
                '&lt;label class="control-label fL" for="multiSelectSelected"&gt;{{ availableLabel }} ' +
                    '({{ available.length }})&lt;/label&gt;'+'&lt;div class="clear"&gt;&lt;/div&gt;'+
                '&lt;select id="multiSelectAvailable"  ng-model="selected.available" multiple ' +
                    'class="pull-left mselect " ng-options="e as e[displayAttr] for e in available"&gt;&lt;/select&gt;' + '&lt;div class="clear"&gt;&lt;/div&gt;'+
              '&lt;/div&gt;'  + 
              '&lt;div class=" width10p fL" &gt;' + 
                '&lt;button class="btn mover left" ng-click="add()" title="Add selected" ' + 
                    'ng-disabled="selected.available.length == 0"&gt;' + 
                  '&lt;i class="icon-arrow-right clrblk"&gt;&amp;gt;&lt;/i&gt;' + 
                '&lt;/button&gt;' +
                '&lt;button class="btn mover right" ng-click="remove()" title="Remove selected" ' + 
                    'ng-disabled="selected.current.length == 0"&gt;' + 
                  '&lt;i class="icon-arrow-left clrblk"&gt;&amp;lt;&lt;/i&gt;' + 
                '&lt;/button&gt;' +
              '&lt;/div&gt;' + 
              '&lt;div class="leftms fL"&gt;' + 
                '&lt;label class="control-label fL" for="multiSelectSelected"&gt;{{ selectedLabel }} ' +
                    '({{ model.length }})&lt;/label&gt;' +'&lt;div class="clear"&gt;&lt;/div&gt;'+
                '&lt;select id="currentRoles" ng-model="selected.current" multiple ' + 
                    'class="pull-left mselect fL" ng-options="e as e[displayAttr] for e in model"&gt;' + 
                    '&lt;/select&gt;' + '&lt;div class="clear"&gt;&lt;/div&gt;'+
              '&lt;/div&gt;' +
              '&lt;div class=" width10p fL" &gt;' + 
                '&lt;button class="btn mover left" ng-click="up()" title="Add selected" ' + 
                    'ng-disabled="selected.current.length == 0"&gt;' + 
                  '&lt;i class="fa fa-angle-up clrblk"&gt;&lt;/i&gt;' + 
                '&lt;/button&gt;' +
                '&lt;button class="btn mover right" ng-click="down()" title="Remove selected" ' + 
                    'ng-disabled="selected.current.length == 0"&gt;' + 
                  '&lt;i  class="fa fa-angle-down clrblk"&gt;&lt;/i&gt;' + 
                '&lt;/button&gt;' +
              '&lt;/div&gt;' +
            '&lt;/div&gt;',  link: function(scope, elm, attrs) {
        scope.selected = {
          available: [],
          current: []
        };
  
        /* Handles cases where scope data hasn't been initialized yet */
        var dataLoading = function(scopeAttr) {
          var loading = $q.defer();
          if(scope[scopeAttr]) {
            loading.resolve(scope[scopeAttr]);
          } else {
            scope.$watch(scopeAttr, function(newValue, oldValue) {
              if(newValue !== undefined)
                loading.resolve(newValue);
            });  
          }
          return loading.promise;
        };
  
        /* Filters out items in original that are also in toFilter. Compares by reference. */
        var filterOut = function(original, toFilter) {
          var filtered = [];
          angular.forEach(original, function(entity) {
            var match = false;
            for(var i = 0; i &lt; toFilter.length; i++) {
              if(toFilter[i][attrs.displayAttr] == entity[attrs.displayAttr]) {
                match = true;
                break;
              }
            }
            if(!match) {
              filtered.push(entity);
            }
          });
          return filtered;
        };
  
        scope.refreshAvailable = function() {
          scope.available = filterOut(scope.available, scope.model);
          scope.selected.available = [];
          scope.selected.current = [];
        }; 
  
        scope.add = function() {
          scope.model = scope.model.concat(scope.selected.available);
          scope.refreshAvailable();
        };
        scope.remove = function() {
          scope.available = scope.available.concat(scope.selected.current);
          scope.model = filterOut(scope.model, scope.selected.current);
          scope.refreshAvailable();
        };
  
        scope.update = function() {
          scope.model = scope.model.concat(scope.selected.current);
          //scope.model = filterOut(scope.model, scope.selected.current);
          scope.refreshAvailable();
        };
  
        scope.up = function() {
          var $op = $('#currentRoles option:selected');
          if($op.length){
              $op.first().prev().before($op);
          }
          $('#currentRoles').find('option').attr('selected','selected');
          //scope.update();
          scope.refreshAvailable();
        };
  
        scope.down = function() {
          var $op = $('#currentRoles option:selected');
          if($op.length){
              $op.last().next().after($op);
          }
          //scope.add();
          scope.refreshAvailable();
          scope.apply();
        };
  
        $q.all([dataLoading("model"), dataLoading("available")]).then(function(results) {
          scope.refreshAvailable();
    });
  }};})// JavaScript Document
  </code></pre>
  
  <p>on this link you will find two select box Available Role &amp; Current role, I have to move item from Available Role to Current role Then Move the item Up and down in Current role Select box
  --- Moving Item from available role to Current role I have used angular js
  --- For Moving item UP and down in Current role I have used Jquery But when I am posting the value order of item is not passing in same format which is in Current role selectbox.</p>
  
  <p>Pls use the fiddle.</p>