AngularJS 1.2.x

var listApp = angular.module('listApp', []);

listApp.controller('ListCtrl', ['$scope', '$q', function ($scope, $q) {
	var deferred = $q.defer();
	$scope.lists = {};

	$scope.database = 'listDB';
	$scope.version = '1.0';
	$scope.displayName = 'Database for my list';
	$scope.maxSizeInBytes = 200000;
	$scope.db = openDatabase($scope.database, $scope.version, $scope.displayName, $scope.maxSizeInBytes);

	function init() {
		// first - create the table
		createTableIfNotExists();
		getLists();
		console.log("init loaded");
	}

	$scope.remove = function(idx) {
		console.log("field: "+idx);
	}	

	// add new records to database
	$scope.set = function() {
		if ($scope.list.name) {

			$scope.insertSql = 'INSERT INTO Lists (name) VALUES (?)';

			$scope.db.transaction(
				function (transaction) {
					transaction.executeSql($scope.insertSql, [$scope.list.name], defaultResultHandler, defaultErrorHandler);
				}
			);
		}
		getLists();
	};

	function resetForm() {
		// clear the input field
	    $scope.listForm.$setPristine();

		//getLists();
	}	

	// create the table, if not exists
	function createTableIfNotExists() {
		$scope.createSql = 'CREATE TABLE IF NOT EXISTS Lists (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)';
		$scope.db.transaction(
			function (transaction) {
				transaction.executeSql($scope.createSql, []);
			}
		);
	}

	function getLists(){
	  return promisedQuery('SELECT * FROM Lists', defaultResultHandler, defaultErrorHandler);
	}

	function defaultResultHandler(deferred) {
	  return function(tx, results) {
	    var len = results.rows.length;
	    var output_results = [];

	    for (var i=0; i<len; i++){
	      output_results.push(results.rows.item(i));
	    }

	    deferred.resolve(output_results);
	    $scope.lists = output_results;
	    $scope.$apply();

	    resetForm();
	  }  
	}

	function defaultErrorHandler(err) {
	  alert("Error processing SQL: " + err.code);
	}

	function promisedQuery(query, successCB, errorCB) {
		$scope.db.transaction(function(tx){
			tx.executeSql(query, [], defaultResultHandler(deferred), errorCB);      
		}, errorCB);

		return deferred.promise;  
	}

	function successCB(deferred) {
		// nothing here
	}

	function errorCB(err) {
	  alert("Error processing SQL: " + err.code);
	}

	init();
	console.log("app loaded");

}]);

<!DOCTYPE html>
<html ng-app="listApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
    <script src="app.js"></script>
  </head>

  <body>
  	<h2>List</h2>
  	<div ng-controller="ListCtrl">
  		<form ng-submit="set()" name="listForm">
  			<input type="text" ng-model="list.name" placeholder="add new list">
  			<input type="submit" value="add">
  		</form>
  		<ul>
  			<li ng-repeat="list in lists">
  				{{list.name}}
  				<input type="submit" value="remove ({{$index}})" ng-click="remove($index)">
  			</li>
  		</ul>
  	</div>
  </body>

</html>

/* Put your css in here */