refactor(typeahead): use ng-if and track by in template

Closes #1722

Author: bekos

src/typeahead/test/typeahead.spec.js

@@ -70,7 +70,7 @@ describe('typeahead tests', function () {
         this.message = function () {
           return 'Expected "' + angular.mock.dump(typeaheadEl) + '" to be closed.';
         };
-        return typeaheadEl.css('display') === 'none' && findMatches(this.actual).length === 0;
+        return typeaheadEl.length === 0;
 
       }, toBeOpenWithActive: function (noOfMatches, activeIdx) {
 
@@ -80,7 +80,7 @@ describe('typeahead tests', function () {
         this.message = function () {
           return 'Expected "' + this.actual + '" to be opened.';
         };
-        return typeaheadEl.css('display') === 'block' && liEls.length === noOfMatches && $(liEls[activeIdx]).hasClass('active');
+        return typeaheadEl.length === 1 && liEls.length === noOfMatches && $(liEls[activeIdx]).hasClass('active');
       }
     });
   });

template/typeahead/typeahead-popup.html

@@ -1,5 +1,5 @@
-<ul class="dropdown-menu" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
-    <li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
+<ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;">
+    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
         <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
     </li>
 </ul>