feat(typeahead): add dynamic toggling of Editable

- Allow user to toggle value of `typeaheadEditable` dynamically

Closes #2638
Closes #4820

Author: damon.friendship

src/typeahead/docs/readme.md

@@ -27,7 +27,7 @@ The typeahead directives provide several attributes:
 * `typeahead-append-to`
    _(Defaults: null)_ : Should the typeahead popup be appended to an element instead of the parent element?
 
-* `typeahead-editable`
+* `typeahead-editable` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: true)_ :
    Should it restrict model values to the ones selected from the popup only ?
 

src/typeahead/test/typeahead.spec.js

@@ -295,6 +295,24 @@ describe('typeahead tests', function() {
         expect(inputEl.val()).toEqual('bar');
     });
 
+    it('should support changing the editable property to limit model bindings to matches only', function() {
+      $scope.isEditable = true;
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="isEditable"></div>');
+      $scope.isEditable = false;
+      $scope.$digest();
+      changeInputValueTo(element, 'not in matches');
+      expect($scope.result).toEqual(undefined);
+    });
+
+    it('should support changing the editable property to bind view value to model even if not part of matches', function() {
+      $scope.isEditable = false;
+      var element = prepareInputEl('<div><input ng-model="result" uib-typeahead="item for item in source | filter:$viewValue" typeahead-editable="isEditable"></div>');
+      $scope.isEditable = true;
+      $scope.$digest();
+      changeInputValueTo(element, 'not in matches');
+      expect($scope.result).toEqual('not in matches');
+    });
+
     it('should bind loading indicator expression', inject(function($timeout) {
       $scope.isLoading = false;
       $scope.loadMatches = function(viewValue) {

src/typeahead/typeahead.js

@@ -44,6 +44,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap
 
     //should it restrict model values to the ones selected from the popup only?
     var isEditable = originalScope.$eval(attrs.typeaheadEditable) !== false;
+    originalScope.$watch(attrs.typeaheadEditable, function (newVal) {
+      isEditable = newVal !== false;
+    }); 
 
     //binding to a variable that indicates if matches are being retrieved asynchronously
     var isLoadingSetter = $parse(attrs.typeaheadLoading).assign || angular.noop;