Angular $scope.var undefined in the controller but present in HTML

Angular $scope.var undefined in the controller but present in HTML

This seems to be a newb question...
I have simple app that displays 2 lists of todos and one text input field
for adding new todos in each list.
Problem 1: When trying to add a new todo the $scope.todoText is undefined
in the controller.
Problem 2: how to add the new todo item to the correct list?
Code: JS
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(listName) {
alert($scope.todoText); // Trying to fix this
// TODO add new todo to listName
$scope.todoText = '';
};
}
HTML
<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({{oneList.name}})">
<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>
JSFiddle here: http://jsfiddle.net/supercobra/v8hxg/