title: AngularJS - "Error: Template must have exactly one root element" when using Angular-UI Typeahead
body: <p>I'm using <a href="http://angular-ui.github.io/bootstrap/#/typeahead">AngularUI Typeahead</a>, 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:</p>
  
  <pre><code>Error: Template must have exactly one root element
  </code></pre>
  
  <p>I have no idea what this means, but it only happens when I have the following code:</p>
  
  <pre><code>&lt;input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"&gt;
  </code></pre>
  
  <p>If relevant, my controller for my main page (which is called via <code>$routeProvider</code> for <code>/</code> index directory):</p>
  
  <pre><code>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'];
  
  }
  </code></pre>
  
  <p>Note that the rest of the controller on the page works absolutely fine, it's just the <code>$scope.selected/$scope.states</code> that is causing trouble. I can't figure out what the error means, so troubleshooting is quite difficult!</p>
  
  <p>Any ideas?</p>
  
  <p><strong>EDIT</strong> Here is my HTML template:</p>
  
  <pre><code>    &lt;html ng-app="myApp" class="ng-scope"&gt;
      &lt;head&gt;
      // Head stuff, probably irrelevant
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div ng-view="" class="row-fluid"&gt;
              &lt;form class="row-fluid"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  // A bunch of Angular scripts are here
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>It's definitely related ot the <code>typeahead</code> script, I can remove <code>typeahead="state for state in states | filter:$viewValue"</code> and the script works (although obviously the <code>typeahead</code> function doesn't...)</p>