bound "clear x completed todos" text

architecture-examples/angularjs/index_new.html

@@ -32,7 +32,7 @@
             </ul>
         </section>
         <footer ng:show="hasTodos()">
-            <a id="clear-completed">Clear completed</a>
+            <a id="clear-completed" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a>
             <div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div>
         </footer>
     </div>

architecture-examples/angularjs/js/controllers.js

@@ -51,9 +51,14 @@ App.Controllers.TodoController = function () {
     self.finishedTodos = countTodos("done");
 
     self.itemsLeftText = function(){
-        return pluralize(self.remainingTodos(), 'item' ) + ' left'
+        return pluralize(self.remainingTodos(), 'item') + ' left'
     };
 
+    self.clearItemsText = function(){
+        var finishedTodos = finishedTodos();
+        return 'Clear ' + finishedTodos + ' completed ' + pluralize(finishedTodos, 'item');
+    }
+
     self.clearCompletedItems = function() {
         var oldTodos = self.todos;
         self.todos = [];