roden0/app.js

## app.js
angular.service('todoStore', function(jsonp, waitDialog) {
    var readUrl = 'https://secure.openkeyval.org/';
    var writeUrl = 'https://secure.openkeyval.org/store/?';

    function read(key, success) {
        waitDialog.show('Please wait');
        jsonp('JSON', readUrl + key + '?callback=JSON_CALLBACK', function(status, data) {
            success(data);
            waitDialog.hide();
        }, function(status) {
            success([]);
            waitDialog.hide();
        });
    }

    function write(key, value) {
        waitDialog.show('Please wait');
        value = encodeURIComponent(JSON.stringify(value));
        jsonp('JSON', writeUrl + key + '=' + value + '&callback=JSON_CALLBACK', function() {
            waitDialog.hide();
        });
    }

    function storageKey(key) {
        if (key) {
            _storageKey = key;
        }
        return _storageKey;
    }

    return {
        read: read,
        write: write,
        storageKey: storageKey
    }

}, {
    $inject: ['$xhr', '$waitDialog']
});

function TodoController(todoStore) {
    this.store = todoStore;
    this.todos = [];
    this.inputText = '';
    this.storageKey = 'SenchaTouchAngularTodoapp';
}

TodoController.$inject = ['todoStore'];

TodoController.prototype = {
    addTodo: function() {
        this.todos.push({
            name: this.inputText,
            done: false
        });
        this.inputText = '';
    },
    refreshTodos: function() {
        var self = this;
        this.store.read(this.storageKey, function(data) {
            if (!data) {
                data = [];
            }
            self.todos = data;
        });
    },
    saveTodos: function() {
        // delete all checked todos
        var newTodos = angular.Array.filter(this.todos, function(todo) {
            return !todo.done;
        });
        this.todos = newTodos;
        this.store.write(this.storageKey, this.todos);
    }
};

## index.html
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" xmlns:stng="http://sencha-touch-angular.org">
<head>
    <title>Sencha Toys</title>
    <meta name="auto-start" content="true">
    <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css"/>
    <script src="http://code.angularjs.org/0.9.19/angular-0.9.19.min.js"></script>
<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
    <script src="https://raw.github.com/tigbro/sencha-touch-angular-adapter/master/compiled/sencha-touch-angular-adapter-0.9.2.min.js"></script>

</head>
<body>

<st:carousel fullscreen="true" ng:controller="TodoController" >
    <st:panel id="todos" st:event="{activate:'refreshTodos()'}" scroll="true">
        <st:toolbar dock="top" title="Todos">
            <st:button text="Save" st:event="{tap:'saveTodos()'}"></st:button>
            <st:spacer></st:spacer>
            <st:button text="Settings" st:event="{tap:'$navigate(\'slide:settings\')'}"></st:button>
        </st:toolbar>
        <st:textfield name="inputText" place-holder="enter your todo here" st:event="{action:'addTodo()'}"></st:textfield>
        <st:panel>
            <st:checkboxfield ng:repeat="todo in todos" name="todo.done" label-width="80%" label="{{todo.name}}"></st:checkboxfield>
        </st:panel>
    </st:panel>
    <st:panel id="settings">
        <st:toolbar dock="top" title="Settings">
            <st:button text="Back" st:event="{tap:'$navigate(\'slide:todos\')'}"></st:button>
        </st:toolbar>
        <st:textfield name="storageKey" label="Store key"></st:textfield>
    </st:panel>

</st:carousel>


</body>
</html>
	angular.service('todoStore', function(jsonp, waitDialog) {
	var readUrl = 'https://secure.openkeyval.org/';
	var writeUrl = 'https://secure.openkeyval.org/store/?';

	function read(key, success) {
	waitDialog.show('Please wait');
	jsonp('JSON', readUrl + key + '?callback=JSON_CALLBACK', function(status, data) {
	success(data);
	waitDialog.hide();
	}, function(status) {
	success([]);
	waitDialog.hide();
	});
	}

	function write(key, value) {
	waitDialog.show('Please wait');
	value = encodeURIComponent(JSON.stringify(value));
	jsonp('JSON', writeUrl + key + '=' + value + '&callback=JSON_CALLBACK', function() {
	waitDialog.hide();
	});
	}

	function storageKey(key) {
	if (key) {
	_storageKey = key;
	}
	return _storageKey;
	}

	return {
	read: read,
	write: write,
	storageKey: storageKey
	}

	}, {
	$inject: ['$xhr', '$waitDialog']
	});

	function TodoController(todoStore) {
	this.store = todoStore;
	this.todos = [];
	this.inputText = '';
	this.storageKey = 'SenchaTouchAngularTodoapp';
	}

	TodoController.$inject = ['todoStore'];

	TodoController.prototype = {
	addTodo: function() {
	this.todos.push({
	name: this.inputText,
	done: false
	});
	this.inputText = '';
	},
	refreshTodos: function() {
	var self = this;
	this.store.read(this.storageKey, function(data) {
	if (!data) {
	data = [];
	}
	self.todos = data;
	});
	},
	saveTodos: function() {
	// delete all checked todos
	var newTodos = angular.Array.filter(this.todos, function(todo) {
	return !todo.done;
	});
	this.todos = newTodos;
	this.store.write(this.storageKey, this.todos);
	}
	};
	<!DOCTYPE html>
	<html xmlns:ng="http://angularjs.org" xmlns:stng="http://sencha-touch-angular.org">
	<head>
	<title>Sencha Toys</title>
	<meta name="auto-start" content="true">
	<link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css"/>
	<script src="http://code.angularjs.org/0.9.19/angular-0.9.19.min.js"></script>
	<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
	<script src="https://raw.github.com/tigbro/sencha-touch-angular-adapter/master/compiled/sencha-touch-angular-adapter-0.9.2.min.js"></script>

	</head>
	<body>

	<st:carousel fullscreen="true" ng:controller="TodoController" >
	<st:panel id="todos" st:event="{activate:'refreshTodos()'}" scroll="true">
	<st:toolbar dock="top" title="Todos">
	<st:button text="Save" st:event="{tap:'saveTodos()'}"></st:button>
	<st:spacer></st:spacer>
	<st:button text="Settings" st:event="{tap:'$navigate(\'slide:settings\')'}"></st:button>
	</st:toolbar>
	<st:textfield name="inputText" place-holder="enter your todo here" st:event="{action:'addTodo()'}"></st:textfield>
	<st:panel>
	<st:checkboxfield ng:repeat="todo in todos" name="todo.done" label-width="80%" label="{{todo.name}}"></st:checkboxfield>
	</st:panel>
	</st:panel>
	<st:panel id="settings">
	<st:toolbar dock="top" title="Settings">
	<st:button text="Back" st:event="{tap:'$navigate(\'slide:todos\')'}"></st:button>
	</st:toolbar>
	<st:textfield name="storageKey" label="Store key"></st:textfield>
	</st:panel>

	</st:carousel>


	</body>
	</html>