When working with Angular, I encountered an issue trying to set a default value for a select box using ng-init from an object that is generated during runtime. Here's the code snippet that's causing me trouble:
<select
ng-model="settings.editing.panel.data.production_company"
ng-change="settings.editing.panel.data.production_company = selectValue"
ng-init="selectValue = settings.editing.panel.data.production_company"
>
<option
ng-repeat="(key, value) in lists.production_companies"
value="{{key}}"
ng-selected="{{selectValue}}"
>
{{value}}
</option>
</select>
The source of my problem seems to be that "lists.production_companies" is an array of names populated at page load and updated via ajax.
The initial state of the object "settings.editing.panel.data" is NULL but it gets loaded later on with a properly formatted object that includes the property "production_company".
I've tried setting ng-init to static values like "ng-init="selectValue = 3" and even creating a $scope.test variable, assigning it a value then using it for ng-init. Both methods work fine.
However, when trying to use a dynamic value, I'm facing issues. How can I leverage my dynamically created object to establish the value of this select box during runtime within my current set-up?