Fire ng-change of Angular page using Selenium

Question

I have two inputs as follows:

1st

<input type="text" class="form-control ng-isolate-scope ng-valid-date ng-animate ng-dirty ng-valid ng-valid-required" name="measurementDate" id=
"measurementDate" placeholder="MM/DD" datepicker-popup="MM/dd" min="01/01/2014" max="12/31/2016" datepicker-options="{&quot;showWeeks&quot;:false,&quot;yearRange&quot;:3}" ng-model="acawiz.data.standardPeriodStart" ng-change="acawiz.setStandardStabilityPeriodStart()" is-open="acawiz.measurementPickerIsOpen" style="">

2nd

<input type="text" class="form-control ng-isolate-scope ng-pristine ng-valid-required ng-valid ng-valid-date" name="stabilityDate" id="stabilityDate" placeholder="MM/DD" show-weeks="false" datepicker-popup="MM/dd" min="01/01/2014" max="12/31/2016" datepicker-options="{&quot;showWeeks&quot;:false,&quot;yearRange&quot;:3}" ng-model="acawiz.data.standardStabilityPeriodStart" ng-change="acawiz.standardStabilityPeriodStartChanged()" is-open="acawiz.stabilityPickerIsOpen" ng-required="true" readonly="" required="required">

Those dates are populated by using date picker(as an end user). But, for Selenium tests I decided to bypass date picker since that can make the tests flakier. To solve the issue I initially thought to remove the required and readonly attributes and use sendKeys() to input the dates and I was successful. I also tried to set the value property of both of them and I see the changes take place with the following:

string value = Convert.ToDateTime(date).ToString("MM/dd");
string setValueProp = @"document.getElementById('measurementDate').value = '" + value + "'";
ExecuteJavaScript(setValueProp);

However, when I click finish the wizard I do not see the changes I made in dates and the possible reason is because ng-change="acawiz.standardStabilityPeriodStartChanged()" never even triggered. Is there a way I can trigger the ng-change accordingly with the javascript code above?

Answer 1

When you change the model programmatically (like you are doing) then ng-change event is not triggered. I think you will have to manually call the change event.

string value = Convert.ToDateTime(date).ToString("MM/dd");
string setValueProp = @"$('#measurementDate').val('" + value + "').trigger('change');";
ExecuteJavaScript(setValueProp);