Angular UI Bootstrap Typeahead Template Shows Empty But Only The First Time

[Darin Hensley]

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 I backspace and do it again...then the template populates. It's like there is some kind of race condition with typeahead-template-url. Ater that, the issue goes away until the next page refresh. Any ideas?

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());

----------------------------------------------------------------------------------------------------

 <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>

----------------------------------------------------------------------------------------------------

<script type="text/ng-template" id="typeahead/bind-node.html">
<a><i>{{match.model.label}} &mdash; {{match.model.address}} &mdash; {{match.model.port}}</i></a>
</script>

[Sander Elias]

Hi Darin,

getNodeLabel returns a promise. Putting promises like that in your view is deprecated bu the core team.

make sure you resolve the promise before you put the data in your view.

What happens now is that the first time around, the promise is build, but not yet resolved.

after a while it is, and all works well. 

Regards

Sander

[Darin Hensley]

Thank you for your reply. I don't think this is necessarly the root cause, because with console log I verify the promise is resolved when I type in the input box. Also, this doesn't happen if I do not use the 

typeahead-template-url.