javascript - AngularJS : drag-n-drop directive not working -

i using following library: https://github.com/marceljuenemann/angular-drag-and-drop-lists

i trying move(by dragging) element 1 list another. disclaimer : newbie appreciated , might doing naive mistake.

here code:

var app = angular.module("app", ['dndlists']);    app.controller( 'myctrl', function ( $scope, $http, $log ) {      $scope.lists = {serverslist:[], selectedserverslist:[]}      $scope.lists.serverslist =      {          label : "servers",          allowedtypes : [              'server'          ],          servers : [              {                  name : "server1",                  type : "server"              }, {                  name : "server2",                  type : "server"              }, {                  name : "server",                  type : "server"              }          ]      };      $scope.lists.selectedserverslist =      {          label : "selectedservers",          allowedtypes : [              'server'          ],          servers : []      };        // model json demo purpose      $scope.$watch('lists', function(lists) {          $scope.modelasjson = angular.tojson(lists, true);      }, true);  };

/**  * correct positioning of placeholder element, dnd-list ,  * it's children must have position: relative  */  .servers-container ul[dnd-list],  .servers-container ul[dnd-list] > li {      position: relative;  }    /**  * dnd-list should have min-height,  * otherwise can't drop once it's empty  */  .servers-container ul[dnd-list] {      min-height: 42px;      padding-left: 0px;  }    /**  * dnddraggingsource class applied  * source element of drag operation. makes  * sense hide give user feeling  * he's moving it.  */  .servers-container ul[dnd-list] .dnddraggingsource {      display: none;  }    /**  * element .dndplaceholder class  * added dnd-list while user dragging  * on it.  */  .servers-container ul[dnd-list] .dndplaceholder {      display: block;      background-color: #ddd;      min-height: 42px;  }    /**  * dnd-lists's child elements must have  * position: relative. otherwise can not determine  * whether mouse pointer in upper or lower  * half of element dragging over. in other  * browsers can use event.offsety this.  */  .servers-container ul[dnd-list] li {      background-color: #fff;      border: 1px solid #ddd;      border-top-right-radius: 4px;      border-top-left-radius: 4px;      display: block;      padding: 10px 15px;      margin-bottom: -1px;        /* disable text selection if item not draggable */      -webkit-touch-callout: none;      -webkit-user-select: none;      -khtml-user-select: none;      -moz-user-select: none;      -ms-user-select: none;      user-select: none;  }    /**  * gender-specifc background  */  .servers-container ul[dnd-list] li.background-man {      background-color: #cae0fc;  }    .servers-container ul[dnd-list] li.background-woman {      background-color: #ffe2f5;  }    .servers-container ul[dnd-list] input.background-man {      background-color: #d8e9ff;      color: #2f4d99;  }    .servers-container ul[dnd-list] input.background-woman {      background-color: #fff0fa;      color: #d84fa7;  }    /**  * handle positioning  */  .servers-container .handle {      cursor: move;      position: absolute;      top: 14px;  }    .servers-container .name {      margin-left: 20px;  }

<div ng-app='app'>      <div class="row" ng-controller='myctrl'>          <div class="servers-container col-md-4">              <ul dnd-list="lists.serverslist"                  dnd-allowed-types="lists.serverslist.allowedtypes">                  <li ng-repeat="server in lists.serverslist.servers"                      dnd-draggable="server"                      dnd-type="server.type"                      dnd-disable-if="server.type == 'unknown'"                      dnd-moved="lists.serverslist.servers.splice($index, 1)"                      dnd-effect-allowed="move"                      class="background-servers">                      <div class="handle">:::</div>                      <div class="name" dnd-nodrag>                          <input type="text" ng-model="server.name" class="background-server form-control input-sm">                      </div>                  </li>                  <li class="dndplaceholder">drop <strong>server</strong> here</li>              </ul>          </div>            <div class="servers-container col-md-4">              <ul dnd-list="lists.selectedserverslist"                  dnd-allowed-types="lists.selectedserverslist.allowedtypes">                  <li ng-repeat="server in lists.selectedserverslist.servers"                      dnd-draggable="server"                      dnd-type="server.type"                      dnd-disable-if="server.type == 'unknown'"                      dnd-moved="lists.selectedserverslist.servers.splice($index, 1)"                      dnd-effect-allowed="move"                      class="background-servers">                      <div class="handle">:::</div>                      <div class="name" dnd-nodrag>                          <input type="text" ng-model="server.name" class="background-server form-control input-sm">                      </div>                  </li>                  <li class="dndplaceholder">drop <strong>server</strong> here</li>              </ul>          </div>      </div>  </div>

i ran code in debug console , saw call on splice is not defined. upon further inspection see <ul dnd-list> element based on serverslist object, rather actual list of things iterate through. did similar when setting dnd list up.

the serverslist.servers array going base of ul , li going entries within array. way splice function have can used on.

that should started. i'm off developer laser tag in second don't have time implement tonight ;).

i've been happy plugin far, have fun!