feat(typeahead): apply angular watch to the typeahead-editable setting

Closes angular-ui#2638

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;