title: Angular UI Bootstrap Typeahead Template Shows Empty But Only The First Time
body: <p>This is weird...the first time I will type in the input box, the typeahead template will pop up but will show empty. But if backspace and do it again...then the template populates. It's like there is some kind of race condition with <code>typeahead-template-url</code>. Ater that, the issue goes away until the next page refresh. Any ideas?</p>
  
  <pre><code>angular.module("main.loadbalancer").controller("BindNodeCtrl", function($scope, $modalInstance, VipService, NodeService, Account, StatusTrackerService) {
    (function(promise) {
      return $scope.getNodeLabel = function(val) {
        return promise.then(function(nodes) {
          var dropDownItems;
          dropDownItems = [];
          _.forEach(nodes, function(node) {
            if (_.str.include(node.id.toLowerCase(), val.toLowerCase())) {
              return dropDownItems.push({
                label: node.label,
                address: node.address,
                port: node.port_number,
                value: node.id,
              });
            }
          });
          return _.sortBy(dropDownItems, 'label');
        });
      };
    })(NodeService.getNodes());
  </code></pre>
  
  <hr>
  
  <pre><code>  &lt;input  type="text" id="label" name="label" ng-model="$parent.node.id" typeahead-min-length="1"
                 placeholder="Node Name / Label"
                 typeahead-editable="false"
                 typeahead="dropDownItem as dropDownItem.label for dropDownItem in getNodeLabel($viewValue)"
                 typeahead-template-url="typeahead/bind-node.html" style="width:100%;"
                 typeahead-loading="loadingNodeLabels" class="form-control" required&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;script type="text/ng-template" id="typeahead/bind-node.html"&gt;
  &lt;a&gt;&lt;i&gt;{{match.model.label}} &amp;mdash; {{match.model.address}} &amp;mdash; {{match.model.port}}&lt;/i&gt;&lt;/a&gt;
  &lt;/script&gt;
  </code></pre>