AngularJS + IE 11 + Polymer = ng-model not updating
pass the value in your function
<input type="text" class="text-input" ng-change="onInputChange(value)" ng-model="value" />
Remove ng-change from your input and modify your directive code like this:
scope.onInputChange = function() { scope.onChange({ item: {reason: scope.reason}, valid: typeof scope.reason === 'string' && scope.reason.length > 0 });};scope.$watch('reason', scope.onInputChange);This is working fine for me. See an working example below:
angular.module('givemeareason', []);angular.module('givemeareason') .controller("foocontroller", function($scope) { var vm = this; vm.reasonChanged = function(item, valid) { console.log("In the controller", item, valid); } });angular.module('givemeareason') .directive('giveMeAReason', ['$timeout', function($timeout) { return { restrict: 'EA', replace: true, template: '<div class="give-me-a-reason">' + '<input type="text" class="reason" ng-model="reason" />' + '</div>', require: 'ngModel', scope: { onChange: '&' }, link: function(scope, elm, attrs, ngModelContoller) { scope.onInputChange = function() { console.log("Changed value", scope.reason); scope.onChange({ item: { reason: scope.reason }, valid: typeof scope.reason === 'string' && scope.reason.length > 0 }); }; scope.$watch('reason', scope.onInputChange); } }; } ]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="givemeareason" ng-controller="foocontroller as importVm"> <give-me-a-reason id="paste-reason" ng-model="importVm.reasonModel" on-change="importVm.reasonChanged(item, valid)"></give-me-a-reason></div>