Angular Listboxes

Copy items from one list to another and back

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<div ng-app="app">
    
<div class="container" ng-controller="Ctrl">
    
    <div class="row">
      <div class="span2 well">
        <h4>Available [{{available.length}}]</h4>
        <ul class="nav nav-list">
          <li  ng-repeat="n in available" ng-click="assign(n)"><a>{{n.name}}</a></li>
        </ul>
      </div>
      <div class="span2 well">
        <h4>Assigned ({{assigned.length}})</h4>
        <ul class="nav nav-list">
          <li ng-repeat="n in assigned" ng-click="unAssign(n)"><a>{{n.name}}</a></li>
        </ul>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="span2">
      {{available}}
      </div>
      <div class="span2">
      {{assigned}}
      </div>    
    </div>
  </div>
</div>

JavaScript

var app = angular.module("app", []);

function Ctrl($scope) {

    $scope.available = [
        {
        "name": "Peter",
        "id": 1},
    {
        "name": "Alasdair",
        "id": 2},
    {
        "name": "Andie",
        "id": 3},
    {
        "name": "Matt",
        "id": 4},
    {
        "name": "John",
        "id": 5}
    ];

    $scope.assigned = [];

    $scope.assign = function(n) {
        var idx = _.indexOf($scope.available, n);
        if (idx != -1) {
            $scope.assigned.push(n);

            $scope.available.splice('a', 1);
        }
    };

    $scope.unAssign = function(n) {
        var idx = _.indexOf($scope.assigned, n);
        if (idx != -1) {
            $scope.available.push(n);
            $scope.assigned.splice(idx, 1);
        }
    };
}