Angularjs data-binding fails with Angular UI-Bootstrap typeahead

Question

I have form field for a website address url that feeds a display elsewhere on the page with ng-model data-binding (it simply shows the url, like " http://thiswebsite.com "). I have another form field that I'm using the angular ui.bootstrap typeahead directive on. The typeahead functionality itself is working fine, however when typeahead is activated (when I begin typing in the typeahead field) then the website address display turns into a hyperlink and it's data-binding fails- meaning if I try typing in the website address url field again the url display doesn't update.

Only the typeahead field in the form triggers the issue and only displays fed from the form that contain urls are affected. I've tried changing the input type for the website address url input field from 'type="url"' to 'type="text"' but no dice.

I put together a jsfiddle but it doesn't reproduce the problem, I presume because I have it set up with older dependency versions (the fiddle is set up with ui.bootstrap 0.4.0 and angular 1.0.7). I set up the fiddle like this because when I tried to set up the fiddle with the dependency versions I'm using (angular 1.3.3 and ui.bootstrap 0.12.0) it wouldn't work at all (data-binding and typeahead both failed outright). But maybe the fiddle will help anyway.

Relevant code:

HTML:

<div ng-controller="mainCtrl">
   <form role="form">
      <div class="form-group">
         <label>Website Address:</label>
         <input class="form-control" type="text" ng-model="provider.website">
      </div>
      <div class="form-group">
         <label>Service Types (ADD):</label>
         <input typeahead="service for service in allServiceTypesArray | filter:$viewValue | limitTo:8" typeahead-editable="false" typeahead-on-select="addServiceType($item, $model, $label)" ng-model="serviceTypeInput" class="form-control" type="text">
      </div>
   </form>
   <table id="provider-table">
      <tr>
         <td class="tableLabels">Website address display:</td>
         <td class="tableContents">{{provider.website}}</td>
      </tr>
      <tr>
         <td class="tableLabels">Provider Type(s):</td>
         <td class="tableContents">{{serviceTypesDisplay}}</td>
      </tr>
   </table>
</div>

JS:

angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {

  $scope.allServiceTypesArray = [ "cleaning"
                                , "mop the floor"
                                , "answer the door"
                                , "superman no home" ]

  $scope.provider = {}

  clearProviderForm();

  function clearProviderForm() {
    $scope.provider.website = ''
    $scope.provider.serviceTypes = [];
    $scope.serviceTypesDisplay = '';
  }

  // add selected service types to array for "Service Types" input field
  $scope.addServiceType = function ($item, $model, $label) {
    $scope.provider.serviceTypes.push($model);
    $scope.provider.serviceTypes.sort();
    $scope.serviceTypeInput = '';
    $scope.serviceTypesDisplay = $scope.provider.serviceTypes.join(", ");
  };
});

I've scoured SO, googled the heck out of this, and combed the UI-Bootstrap github issues but it appears I'm the only person in the world that has run into this (or it's some insanely simple thing I'm doing wrong!). It may very well be just a version incompatibility issue but I'd like to know in case it's not, and if it is perhaps somebody knows a fix or even an acceptable work-around.

Of course any help will be greatly appreciated.

Answer 1

Got it! I'm not sure what caused the problem but I found a solution:

Instead of double curly-braces:

<td class="tableContents">{{provider.website}}</td>

Going with ng-bind:

<td class="tableContents" ng-bind="provider.website"></td>

solved the problem. The website addresses still show as hyperlinks but data-binding works as it should when typing in the input field.