I have set up a dropdown menu that is connected to a text area. When a selection is made from the dropdown, the text area is automatically populated with information from the same model. You can see a working example here: JSFiddle
However, I am now attempting to dynamically change the dropdown menu and have that change reflected in the text area. Even though I can update the dropdown by setting the value, the change is not being passed on to the text area. The ng-change event does not trigger when the dropdown is manually set, and I am unable to directly set the value of the text area since it is dependent on the dropdown model.
Is it possible to achieve what I am trying to do?
<div ng-controller="Ctrl">
<div class="inputItem sectionArea">
<label>Sample List:</label>
<select class="allVars"
ng-change="selectAction()"
ng-model="allVarsDD"
ng-options="allVars.text_short for allVars in allVars"
>
<option value="">-- Select Option --</option>
</select>
<br/>
<textarea class="frequentInstructions inputLine" type="textarea" name="frequentInstructions"
ng-model="allVarsDD.text_long"
</textarea>
</div>
<div>
<script>
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.allVars=[
{"fid":"1","environment":"0","text_short":"Short text 1","text_long":"text_long_1"},
{"fid":"1","environment":"0","text_short":"Short text 2","text_long":"text_long_2"},
{"fid":"1","environment":"0","text_short":"Short text 3","text_long":"text_long_3"}
];
}
</script>