I am struggling with displaying the correct value of an ngModel variable defined in my controller. Despite changing to the correct value in the console, it doesn't update on the page until I click somewhere else or hit the update button again.
Here's a snippet from my themeLayout.html file:
<div class="theme-body" ng-controller="ThemeController as theme">
<select ng-model="theme.selectedTheme" ng-change="theme.getThemeDetails(theme.selectedTheme)">
<option ng-repeat="option in theme.themePacks">{{option.title}}</option>
</select>
<div class="form-group">
<label for="appLogo">App Logo</label>
<div>
<img ng-src="{{theme.currentThemeImageUrl}}" alt="Description" />
</div>
<input type="text" class="form-control" id="appLogo" ng-model="theme.currentThemeImageUrl">
</div>
</div>
And here is a snippet from my theme controller:
export default class ThemeController {
constructor($log, ApiService, $scope, $state, $window) {
'ngInject';
this.s3 = new this.AWS.S3();
this.selectedTheme = '';
this.currentThemeId = '';
this.currentS3ThemeOption = {};
this.currentS3ThemeOptionToUpload = {};
this.currentThemeImageUrl = '';
}
getThemeDetails(theme) {
// Code for getting and updating theme details
}
}
When I select the option from the dropdown, it retrieves and stores the data into currentSeThemeOption. https://i.sstatic.net/88vFi.png
Despite logging the value in the console, https://i.sstatic.net/GgxGG.png
I suspect that there might be a problem with 'this' and obj in the code.
Following suggestions, I also tried adding $scope.apply() function, but unfortunately, it didn't resolve the issue.