I have a select box within my template that has the following structure:
<form name="myForm" class="fixed-select">
<select name="repeatSelect" id="repeatSelect"
ng-model="selectedItem">
<option ng-repeat="program in programs"
value="{{program.name}}">
{{program.name}}
</option>
</select>
</form>
The content of my template is simply this:
<div ng-include="'/views/program/program.html'"></div>
Now, in my controller (let's name it MyCtrl), I am able to set the selectedItem and see the correct data loaded:
$scope.selectedItem = "Manage";
However, when trying to interact with the select box manually, nothing occurs. This leads me to believe that it is not connected to the parent scope (the current controller - MyCtrl - of the template being included using ng-include).
I have tried searching for solutions on how to resolve this issue, with some suggestions involving modifying the template to include $parent or similar. Is this step really necessary? I had hoped that ng-include would be an effective way to encapsulate existing data for reuse without needing modifications. What steps should I take to connect the ng-include scope to the controller (MyCtrl)?
Thank you for taking the time to read and consider this.
edit1: The 'programs' array used to populate the select box consists of simple strings: ["Main","Etc"]