demo(collection-repeat): add clear button

demos/collection-repeat/index.html

@@ -18,6 +18,10 @@
   </ion-header-bar>
   <ion-header-bar class="bar-light bar-subheader">
     <input type="search" placeholder="Filter contacts..." ng-model="search">
+    <button ng-show="search.length"
+      class="button button-icon ion-android-close input-button"
+      ng-click="search = ''">
+    </button>
   </ion-header-bar>
   <ion-content>
     <div class="list">
@@ -33,7 +37,7 @@
     <div class="letter"
       ng-repeat="letter in letters"
       ng-click="goToLetter(letter)"
-      ng-style="{top: (100/26)*$index + '%'}">
+      ng-style="{top: (100/letters.length)*$index + '%'}">
       {{letter}}
     </div>
   </div>
@@ -54,6 +58,12 @@
   position: absolute;
   z-index: 100;
 }
+.button.button-icon.input-button {
+  position: absolute;
+  right: 0;
+  top: 5px;
+  color: #bbb;
+}
 </style>
 </body>
 </html>

demos/collection-repeat/script.js

@@ -42,11 +42,12 @@ angular.module('contactsApp', ['ionic'])
     return item.isLetter ? 38 : 52;
   };
 
+  var letterHasMatch = {};
   $scope.getContacts = function() {
+    letterHasMatch = {};
     //Filter contacts by $scope.search.
     //Additionally, filter letters so that they only show if there
     //is one or more matching contact
-    var letterHasMatch = {};
     return contacts.filter(function(item) {
       var itemDoesMatch = !$scope.search || item.isLetter ||
         item.first_name.toLowerCase().indexOf($scope.search.toLowerCase()) > -1 ||