Changes required to make AngularJS/TodoMVC real-time with angularFire.

todomvc_angularFire.diff

diff -ur ../todomvc/architecture-examples/angularjs/index.html examples/todomvc/index.html
--- ../todomvc/architecture-examples/angularjs/index.html  2013-03-15 15:31:06.000000000 -0700
+++ examples/todomvc/index.html	2013-03-22 15:21:00.000000000 -0700
@@ -61,9 +61,10 @@
 		</footer>
 		<script src="components/todomvc-common/base.js"></script>
 		<script src="components/angular/angular.js"></script>
+		<script src="https://cdn.firebase.com/v0/firebase.js"></script>
+		<script src="../../angularFire.js"></script>
 		<script src="js/app.js"></script>
 		<script src="js/controllers/todoCtrl.js"></script>
-		<script src="js/services/todoStorage.js"></script>
 		<script src="js/directives/todoFocus.js"></script>
 		<script src="js/directives/todoBlur.js"></script>
 	</body>
diff -ur ../todomvc/architecture-examples/angularjs/js/app.js examples/todomvc/js/app.js
--- ../todomvc/architecture-examples/angularjs/js/app.js	2013-03-15 15:31:06.000000000 -0700
+++ examples/todomvc/js/app.js	2013-03-22 15:15:22.000000000 -0700
@@ -7,4 +7,4 @@
  *
  * @type {angular.Module}
  */
-var todomvc = angular.module('todomvc', []);
+var todomvc = angular.module('todomvc', ['firebase']);
diff -ur ../todomvc/architecture-examples/angularjs/js/controllers/todoCtrl.js examples/todomvc/js/controllers/todoCtrl.js
--- ../todomvc/architecture-examples/angularjs/js/controllers/todoCtrl.js	2013-03-15 15:31:06.000000000 -0700
+++ examples/todomvc/js/controllers/todoCtrl.js	2013-03-22 15:44:24.000000000 -0700
@@ -6,25 +6,30 @@
  * - retrieves and persist the model via the todoStorage service
  * - exposes the model to the template and provides event handlers
  */
-todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage, filterFilter) {
-	var todos = $scope.todos = todoStorage.get();
+todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, angularFire, filterFilter) {
+	var url = "https://anant.firebaseio.com/angular";
+	$scope.todos = angularFire(url, $scope, 'todos');

 	$scope.newTodo = '';
 	$scope.editedTodo = null;

-	$scope.$watch('todos', function () {
-		$scope.remainingCount = filterFilter(todos, {completed: false}).length;
-		$scope.completedCount = todos.length - $scope.remainingCount;
-		$scope.allChecked = !$scope.remainingCount;
-		todoStorage.put(todos);
-	}, true);
-
 	if ($location.path() === '') {
 		$location.path('/');
 	}
-
 	$scope.location = $location;

+	$scope.todos.then(function(todos) {
+		startWatch($scope, filterFilter);
+	});
+});
+
+function startWatch($scope, filter) {
+	$scope.$watch('todos', function () {
+		$scope.remainingCount = filter($scope.todos, {completed: false}).length;
+		$scope.completedCount = $scope.todos.length - $scope.remainingCount;
+		$scope.allChecked = !$scope.remainingCount;
+	}, true);
+
 	$scope.$watch('location.path()', function (path) {
 		$scope.statusFilter = (path === '/active') ?
 			{ completed: false } : (path === '/completed') ?
@@ -36,7 +41,7 @@
 			return;
 		}

-		todos.push({
+		$scope.todos.push({
 			title: $scope.newTodo,
 			completed: false
 		});
@@ -56,18 +61,18 @@
 	};

 	$scope.removeTodo = function (todo) {
-		todos.splice(todos.indexOf(todo), 1);
+		$scope.todos.splice($scope.todos.indexOf(todo), 1);
 	};

 	$scope.clearCompletedTodos = function () {
-		$scope.todos = todos = todos.filter(function (val) {
+		$scope.todos = $scope.todos.filter(function (val) {
 			return !val.completed;
 		});
 	};

 	$scope.markAll = function (completed) {
-		todos.forEach(function (todo) {
+		$scope.todos.forEach(function (todo) {
 			todo.completed = completed;
 		});
 	};
-});
+}

Hi. Thanks for this. Do you know what should be done with routeProvider with respect to what happens when a user clicks on /active or /completed? As it stands with my app, clicking these links redirects to my default page, rather than only showing the active or completed todos, respectively. Any ideas on what I'm doing wrong?