added todo counter

architecture-examples/angularjs/css/overwrite.css

 /*overwrite this as its getting in the angular way */
 #main {
     display: block;
+}
+
+#todoapp footer{
+    display: block;
+}
+
+/*this doesn't seemed to be used in the jquery example at all. Its getting in the way */
+#todo-count span {
+	font-weight: inherit;
 }
\ No newline at end of file

architecture-examples/angularjs/index_new.html

@@ -31,9 +31,9 @@
                 </li>
             </ul>
         </section>
-        <footer>
+        <footer ng:show="hasTodos()">
             <a id="clear-completed">Clear completed</a>
-            <div id="todo-count"></div>
+            <div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div>
         </footer>
     </div>
     <div id="instructions">

architecture-examples/angularjs/js/controllers.js

@@ -7,7 +7,7 @@ App.Controllers.TodoController = function () {
 
     self.addTodo = function() {
         if (self.newTodo.length === 0) return;
-        
+
         self.todos.push({
             content: self.newTodo,
             done: false,
@@ -42,10 +42,18 @@ App.Controllers.TodoController = function () {
         }
     };
 
+    var pluralize = function( count, word ) {
+        return count === 1 ? word : word + 's';
+    }
+
     self.remainingTodos = countTodos("undone");
 
     self.finishedTodos = countTodos("done");
 
+    self.itemsLeftText = function(){
+        return pluralize(self.remainingTodos(), 'item' ) + ' left'
+    };
+
     self.clearCompletedItems = function() {
         var oldTodos = self.todos;
         self.todos = [];