title: Tabs possibly cause Typeahead ng-model to break in Bootstrap UI
body: <p>In AngularJS with Bootstrap UI I realised that if i put a typeahead (drawing from a static array) within a tab, the model of the former gets broken and I'm not able, for instance, to reset it. It just works the first time I try to reset, then it is like the value you select within the typeahead get detached from the model you gave to it.</p>
  
  <p>Open the console to see the function that resets the model gets called, but the act of resetting it gets done only once.</p>
  
  <p>Here the running code: <a href="https://jsfiddle.net/74exww04/497/" rel="nofollow noreferrer">https://jsfiddle.net/74exww04/497/</a></p>
  
  <p>Angular:</p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
    .controller('DemoCtrl', function($rootScope, $scope, $log, $uibModal) {
  
      $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'];
      $scope.selected = $scope.states[10];
  
      $scope.resetModel = function() {
          $scope.selected = undefined;
        console.log('the function run');
      }
  
    });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="ui.bootstrap.demo"&gt;
    &lt;div ng-controller="DemoCtrl"&gt;
  
      &lt;uib-tabset active="activeJustified" justified="true"&gt;
        &lt;uib-tab index="0" heading="Zero"&gt;
          &lt;h4&gt;Static arrays&lt;/h4&gt;
          &lt;pre&gt;Model: {{selected | json}}&lt;/pre&gt;
          &lt;input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control"&gt;
          &lt;p ng-click="resetModel()"&gt;Click here to reset model "personSelected"&lt;/p&gt;
        &lt;/uib-tab&gt;
        &lt;uib-tab index="1" heading="One"&gt;Justified content One&lt;/uib-tab&gt;
        &lt;uib-tab index="2" heading="Two"&gt;Justified content Two&lt;/uib-tab&gt;
      &lt;/uib-tabset&gt;
  
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>