AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
 <h2>Todo</h2>
 <div ng-controller="TodoCtrl">
  <ul>
   <li ng-repeat="oneList in lists">
    <ul>
     <hr/>
     <h2>=== {{oneList.name}} ===</h2>
     <form ng-submit="addTodo($index,todoText)">
      <input type="text" ng-model="todoText"  size="30"
      placeholder="add new todo here">
      <input type="submit" value="add">
     </form>
     <li ng-repeat="todo in oneList.todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>    
        </ul>
            
      </li>
    </ul>      
                 
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

function TodoCtrl($scope) {
 
 $scope.lists = [
        {name:'list1',     
         todos:[
            {text:'learn angular', done:true},
            {text:'build an angular app', done:false}
            ]},
        {name:'list2',     
         todos:[
            {text:'buy milk', done:false},
            {text:'buy fruit', done:false}]}
        ];                
  $scope.addTodo = function(i,name) {     
    // TODO add new todo to listName    
    $scope.todoText = '';
     $scope.lists[i]['todos'].push(
          {text:name,done:false}
      );
     //alert($scope.todoText); // Trying to fix this 
  };

  
}