AngularJS - "Error: Template must have exactly one root element" when using Angular-UI Typeahead
angular-ui, angular-ui-bootstrap, angularjs, javascript
Solution
Make sure you are adding the correct `ui-bootstrap-tpls-[version].min.js` file (tpls versions contain templates as well as code). You will need a script tag somewhere referencing a local or cdn version.
It is most likely that this error is caused by angular not being able to find the template to display the typeahead options, attempting to fetch one over http and retrieving a 404 instead (with a new root html element, thus the error).
Problem
I'm using AngularUI Typeahead, on the 'index' page of my app. I'm not doing anything fancy - in fact, I'm just trying to get the example they've got up on their UI site working, and I'm getting this error: ``` Error: Template must have exactly one root element ``` I have no idea what this means, but it only happens when I have the following code: ``` <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> ``` If relevant, my controller for my main page (which is called via `$routeProvider` for `/` index directory): ``` function indexCtrl($scope, $location, $resource) { $scope.selected = undefined; $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; } ``` Note that the rest of the controller on the page works absolutely fine, it's just the `$scope.selected/$scope.states` that is causing trouble. I can't figure out what the error means, so troubleshooting is quite difficult! Any ideas? EDIT Here is my HTML template: ``` <html ng-app="myApp" class="ng-scope"> <head> // Head stuff, probably irrelevant </head> <body> <div class="container"> <div ng-view="" class="row-fluid"> <form class="row-fluid"> <div class="container-fluid"> <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> </div> </form> </div> </div> // A bunch of Angular scripts are here </body> </html> ``` It's definitely related ot the `typeahead` script, I can remove `typeahead="state for state in states | filter:$viewValue"` and the script works (although obviously the `typeahead` function doesn't...)