feat(typeahead): change to appendTo

- Change signature to `appendTo`, which takes a value that evaluates to a DOM node for API consistency

BREAKING CHANGE: Usage before
```html
<div id="typeahead-container"></div>
<input typeahead="state for state in states | filter: $viewValue | limitTo: 8" typeahead-append-to-element-id="typeahead-container">
```
After
```html
<div id="typeahead-container"></div>
<input typeahead="state for state in states | filter: $viewValue | limitTo: 8" typeahead-append-to="typeaheadContainer">
```
```js
$scope.typeaheadContainer = angular.element(document.querySelector('#typeaheadContainer'));
```

Closes #4797

src/typeahead/docs/readme.md

@@ -24,8 +24,8 @@ The typeahead directives provide several attributes:
 * `typeahead-append-to-body` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: false)_ : Should the typeahead popup be appended to $body instead of the parent element?
 
-* `typeahead-append-to-element-id`
-   _(Defaults: false)_ : Should the typeahead popup be appended to an element id instead of the parent element?
+* `typeahead-append-to`
+   _(Defaults: null)_ : Should the typeahead popup be appended to an element instead of the parent element?
 
 * `typeahead-editable`
    _(Defaults: true)_ :
@@ -85,4 +85,4 @@ The typeahead directives provide several attributes:
 
 * `typeahead-show-hint`
    _(Defaults: false)_ :
-   Should input show hint that matches the first option?
+   Should input show hint that matches the first option?

src/typeahead/test/typeahead.spec.js

@@ -967,7 +967,7 @@ describe('typeahead tests', function() {
       expect($scope.result).toEqual($scope.states[0]);
     });
   });
-  
+
   describe('input hint', function() {
     var element;
 
@@ -1047,10 +1047,11 @@ describe('typeahead tests', function() {
     });
   });
 
-  describe('append to element id', function() {
+  describe('append to', function() {
     it('append typeahead results to element', function() {
       $document.find('body').append('<div id="myElement"></div>');
-      var element = prepareInputEl('<div><input name="input" ng-model="result" uib-typeahead="item for item in states | filter:$viewValue" typeahead-append-to-element-id="myElement"></div>');
+      $scope.myElement = $document.find('#myElement');
+      var element = prepareInputEl('<div><input name="input" ng-model="result" uib-typeahead="item for item in states | filter:$viewValue" typeahead-append-to="myElement"></div>');
       changeInputValueTo(element, 'al');
       expect($document.find('#myElement')).toBeOpenWithActive(2, 0);
       $document.find('#myElement').remove();

src/typeahead/typeahead.js

@@ -61,7 +61,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
     var appendToBody =  attrs.typeaheadAppendToBody ? originalScope.$eval(attrs.typeaheadAppendToBody) : false;
 
-    var appendToElementId =  attrs.typeaheadAppendToElementId || false;
+    var appendTo = attrs.typeaheadAppendTo ?
+      originalScope.$eval(attrs.typeaheadAppendTo) : null;
 
     var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;
 
@@ -423,7 +424,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
     originalScope.$on('$destroy', function() {
       $document.unbind('click', dismissClickHandler);
-      if (appendToBody || appendToElementId) {
+      if (appendToBody || appendTo) {
         $popup.remove();
       }
 
@@ -443,8 +444,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
     if (appendToBody) {
       $document.find('body').append($popup);
-    } else if (appendToElementId !== false) {
-      angular.element($document[0].getElementById(appendToElementId)).append($popup);
+    } else if (appendTo) {
+      angular.element(appendTo).eq(0).append($popup);
     } else {
       element.after($popup);
     }