feat(typeahead): anchor popup left or right of input

src/typeahead/typeahead.js

@@ -57,6 +57,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
       var inputFormatter = attrs.typeaheadInputFormatter ? $parse(attrs.typeaheadInputFormatter) : undefined;
 
+      //anchoring typeahead to side of input (left, right or auto)
+      var anchor = attrs.typeaheadAnchor ? attrs.typeaheadAnchor : 'left';
+
       //INTERNAL VARIABLES
 
       //model setter executed upon match selection
@@ -74,7 +77,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         active: 'activeIdx',
         select: 'select(activeIdx)',
         query: 'query',
-        position: 'position'
+        position: 'position',
+        anchor: anchor
       });
       //custom item template
       if (angular.isDefined(attrs.typeaheadTemplateUrl)) {
@@ -289,6 +293,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         query:'=',
         active:'=',
         position:'=',
+        anchor:'@',
         select:'&'
       },
       replace:true,
@@ -312,6 +317,27 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         scope.selectMatch = function (activeIdx) {
           scope.select({activeIdx:activeIdx});
         };
+
+        scope.displayStyle = function() {
+          var style = {display: scope.isOpen()&&'block' || 'none'};
+          if (!angular.isUndefined(scope.position)) {
+            style.top = scope.position.top+'px';
+            if (scope.anchor === 'right' || (scope.anchor === 'auto' && element.width() + scope.position.left > document.documentElement.clientWidth &&
+                element.width() < scope.position.left + scope.position.width)) {
+              //anchor on the right if typeahead-anchor is set to right, or if set to auto and it would
+              //overflow if anchored to left without overflowing when anchored to right
+              style.left = 'auto';
+              style.right = document.documentElement.clientWidth - scope.position.left - scope.position.width;
+            } else if (scope.anchor === 'left') {
+              //if typeahead-anchor is set to left
+              style.left = scope.position.left+'px';
+            } else {
+              //if typeahead-anchor is set to auto and it overflows whatever the side it is anchored to.
+              style.left = 0;
+            }
+          }
+          return style;
+        };
       }
     };
   })

template/typeahead/typeahead-popup.html

@@ -1,4 +1,4 @@
-<ul class="typeahead dropdown-menu" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
+<ul class="typeahead dropdown-menu" ng-style="displayStyle()">
     <li ng-repeat="match in matches" 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>