Sort able checkbox list with angularjs

Question

Does anyone know how I can make a checkbox list sortable using ui-sortable? Here is the checkbox list:

<div class="controls">
    <label ng-repeat="player in playerlist">
        <input
                type="checkbox"
                name="player.firstname"
                ng-model="player.value"
                > {{player.firstname}}{{player.lastname}}
    </label>
    <!--<pre>{{playerlist| json}}</pre>-->
</div>

I have tried (somewhat optimistically) putting ui-sortable into the label tag but no luck....

Any suggestions?

Cheers,

kseudo

Edit*

Sorry.... didnt post an example model :)

playerlist = [
  {
    "firstname": "Mick",
    "lastname": "McCarthy",
    "_id": "5269409949e375aa0c000005",
    "__v": 0,
    "value": true
  },
  {
    "__v": 0,
    "_id": "5269408f49e375aa0c000004",
    "email": "[email protected]",
    "firstname": "Brian",
    "lastname": "Cunningham",
    "phonenumber": 833069486,
    "value": true
  },
  {
    "firstname": "Bill",
    "lastname": "Bops",
    "phonenumber": 23456789,
    "email": "[email protected]",
    "_id": "526c011aaa6d6ef40c000003",
    "__v": 0,
    "value": true
  },
  {
    "firstname": "asdf",
    "lastname": "sdf",
    "phonenumber": 234,
    "email": "[email protected]",
    "_id": "526c01b4aa6d6ef40c000005",
    "__v": 0,
    "value": false
  }
]

Answer 1

You should be adding ui-sortable to the div rather the repeated label itself. Further, you need to include the ng-model directive along side it so the library knows what model to update.

<div class="controls" ui-sortable ng-model="playerList">

I also assume you are including jQuery and jQueryUI in your project.