I am faced with the challenge of detecting when a variable changes on the HTML side, but I am struggling to implement an event listener ($watch) in my Angular controller.
Here is the specific issue that I am attempting to resolve:
<div class="form-group">
<label class="col-md-3 control-label">Please Select the Device</label>
<div class="col-md-9">
<select class="form-control" ng-model="reportCtrl.selectedDevice" ng-options="item.name as item.MyName for item in reportCtrl.deviceList">
</select>
</div>
</div>
<div class="form-group" ng-if="reportCtrl.selectedDevice">
<label class="col-md-3 control-label">Please Select the Sensor</label>
<div class="col-md-9">
<select class="form-control">
</select>
</div>
</div>
The options in the dropdown are populated based on the device list. When a user selects a device, I need to trigger another call to retrieve sensor properties within that device. My goal is to initiate this call when a user selects a device.
How can I incorporate an event listener in this scenario to execute the necessary call?