I'm trying to trigger on-change on a readonly input. I can't find an alternative way to do it.
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form>
<input type="text" ng-change="changeRO()" ng-model="input" readonly placeholder="I have readonly attribute." />
<input type="text" ng-change="change()" ng-model="input" placeholder="Write" />
<p ng-repeat="text in texts">{{text}}</p>
</form>
</body>
If your input is readonly than that means the user cannot directly change its value. And if user cannot do that than the onchange event will never be fired. Same stands for cases where you're changing the values dynamically, - the onchange event won't be fired.
In your case, since your read/write inputs are connected to 'input' model (through ng-model), you can trigger your 'changeRO' callback from $watch function in your controller:
$scope.$watch('input', function(){
$scope.changeRO();
});