javascript - AngularJS + IE 11 + Polymer = ng-model not updating -

in directive in application have text input variable bound using ng-model:

<input type="text" class="text-input" ng-change="oninputchange()" ng-model="value" /> 

i've set following in link function:

scope.oninputchange = function() {    console.log(scope.value); };  scope.$watch('value', function(value) {    console.log(value); });  setinterval(function(){    console.log(scope.value); }, 500); 

as type in input field, ng-change , watch never fired , interval outputs undefined.

running directive in standalone application in ie 11 works.

running directive in standalone application in chrome (latest) works.

running whole application in chrome (latest) works.

what in application causing behaviour?

edit 2:

this situation appears have been caused webcomponents.js. when file included in ie 11, removes event listeners dom elements replaces them it's own dispatchoriginalevent function. on input field specified, fails replace of normal event listeners , text input not noticed.

edit 3:

i've narrowed down problem further combination of angular's ng-include , webcomponents.js polyfill shadowdom. have therefore added issue github instance webcomponentsjs

edit: full directive

'use strict';  (function(angular) {      angular.module('givemeareason', [         'config'     ]);      angular.module('givemeareason')         .directive('givemeareason', ['$timeout', 'appconfig', function($timeout, appconfig) {             return {                 restrict: 'ea',                 replace : true,                 template: '<div class="give-me-a-reason">' +                     '<input type="text" class="reason" ng-change="oninputchange()" ng-model="reason" />' +                     '</div>',                 require : 'ngmodel',                 scope   : {                     onchange: '&'                 },                 link    : function(scope, elm, attrs, ngmodelcontoller) {                     scope.oninputchange = function() {                         scope.onchange({                             item: {reason: scope.reason},                             valid: typeof scope.reason === 'string' && scope.reason.length > 0                         });                     };                      scope.$watch('reason', function(reason) {                         console.log(reason);                     });                      setinterval(function(){                         console.log(scope.reason);                     }, 500);                 }             };         }]);     }(window.angular)); 

usage:

<give-me-a-reason id="paste-reason" ng-model="importvm.reasonmodel" on-change="importvm.reasonchanged(item, valid)"></give-me-a-reason> 

edit:

the following errors appear in console. may or may not related:

object doesn't support property or method 'animate'. file: web-animations.min.js, line 16, column: 11207 assertion failed. file: webcomponents.js, line: 116, column: 15 

after exploring on issues, appear related browsersync , issue described in question still occurs without them.

pass value in function

<input type="text" class="text-input" ng-change="oninputchange(value)" ng-model="value" />