Ng-model did't show updated value until click somewhere on the page

Question

All I want to do is to display the value of a ngModel, a variable defined in my controller. But the value didn't change to the correct value until I click somewhere else on the page or click the update button again. Although it does change to the correct value in the console.

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 this is 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) {
        this.$log.log(`get theme details function been called`, theme);
        const obj = this;
        for(let item of this.themePacks) {
          if (theme === item.title) {
            this.currentThemeId = item.themeId;
          }
        }
        this.s3.getObject({
        Bucket: `improd-image-pipeline`,
        Key: `remoteUX/qa/${obj.currentThemeId}.json`,
        }, (err, data) => {
          if (err) {
            obj.$log.log(err);
          } else {
            obj.currentS3ThemeOption = JSON.parse(data.Body);
            obj.currentS3ThemeOptionToUpload = obj.currentS3ThemeOption;
            for (const prop in obj.currentS3ThemeOption.colors) {
              obj[prop] = obj.getColors(obj.currentS3ThemeOption.colors[prop]);
            }
            obj.currentThemeImageUrl = obj.currentS3ThemeOption.layout.titleImageUrl;
            obj.$log.log(`We should have upadted theme opion now`, obj.currentS3ThemeOption, obj.currentThemeImageUrl);
          }
     });
       this.$log.log(obj.currentS3ThemeOption, this.currentS3ThemeOption);
     }
}

This is when I click the fox option in the selection, it read the data and stroe it into the currentSeThemeOption.

As you can see from the console, it also print of the value

What I am thingking is that might the 'this' and obj is causing the problem.

After I did add $scope.apply() function as he suggested, but it didn't solve the problem.

Answer 1

Update your model inside a scope.$apply() call:

getThemeDetails(theme) {
  this.$log.log(`get theme details function been called`, theme);
  const obj = this;
  for(let item of this.themePacks) {
    if (theme === item.title) {
      this.currentThemeId = item.themeId;
    }
  }
  this.s3.getObject({
  Bucket: `improd-image-pipeline`,
  Key: `remoteUX/qa/${obj.currentThemeId}.json`,
  }, (err, data) =>
    scope.$apply(() => {
    if (err) {
      obj.$log.log(err);
    } else {
      obj.currentS3ThemeOption = JSON.parse(data.Body);
      obj.currentS3ThemeOptionToUpload = obj.currentS3ThemeOption;
      for (const prop in obj.currentS3ThemeOption.colors) {
        obj[prop] = obj.getColors(obj.currentS3ThemeOption.colors[prop]);
      }
      obj.currentThemeImageUrl = obj.currentS3ThemeOption.layout.titleImageUrl;
      obj.$log.log(`We should have upadted theme opion now`, obj.currentS3ThemeOption, obj.currentThemeImageUrl);
    }
  })
);
  this.$log.log(obj.currentS3ThemeOption, this.currentS3ThemeOption);
}