Apologies for the vague subject, finding it difficult to accurately describe this issue.

I have implemented a rating system for specific content. The rating page is displayed in a modal. Initially, when the user rates the content for the first time, everything functions as expected. However, if the user does not refresh the data from the server and revisits the same review/modal to edit their review - including changing the rating which alters the colors of the stars (from 1 to 5 stars).

The issue arises when the user refreshes the data or opens the app for the first time, fetching data from the server. The modal displays all the correct ratings and reviews from their previous entry. But, if they attempt to change the star rating they previously gave (e.g., changing from a 2 to a 4), although the data recorded from the function shows the new value as 4, visually nothing changes - it still only displays two colored stars.

I have included console messages to track the iteration through the star/rating color function. Despite the console messages showing the correct colors being assigned, the actual color of the stars remains unchanged.

Relevant CSS:

.reviewColor {
  color: lightgray ;
}

The modal structure:

<ion-modal-view class="modalReviews">
  <ion-header-bar>
    <div class="headerBar">
      <div class="headerBarDiv">PRODUCT REVIEW</div>
      <button type="button" class="button button-block button-small-custom headerBarButton" ng-click="closeReviews()"> X </button>
    </div>    
  </ion-header-bar>

  <ion-content>
  <div id="reviewWrapper">
    <div ng-if="doReview == 1" id="doReview" class="prodSection prodReviewCard">
      <div ng-if="prod.reviews.userReviewDate != 0">
        Last review submitted on: {{prod.reviews.userReviewDate}}
      </div>
      <div class="" style="text-align:center;">
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_1" ng-click="reviewRating('Rating',prod.ceID,1);" ng-style="1 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_2" ng-click="reviewRating('Rating',prod.ceID,2);" ng-style="2 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_3" ng-click="reviewRating('Rating',prod.ceID,3);" ng-style="3 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_4" ng-click="reviewRating('Rating',prod.ceID,4);" ng-style="4 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_5" ng-click="reviewRating('Rating',prod.ceID,5);" ng-style="5 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
      </div>
      <div style="margin-top:10px;">
        <textarea style="border:1px solid lightgray;width:100%;height:100px;" maxlength="255" ng-model="userReview" id="userReview">{{prod.reviews.userReview}}</textarea>
      </div>
      <div style="margin-top:20px;">
        <input type="checkbox" id="userAnon" ng-model="userAnon" ng-true-value="'{{userDisplayName}}'" ng-false-value="'Anonymous'" style="margin-left:25px;margin-right:5px;vertical-align:bottom;width:20px;height:20px;" ng-checked="prod.reviews.userAnon != 'Anonymous'"></input>Display '{{userDisplayName}}' with review? 
      </div>

      <div style="margin-top:20px;">
        <button type="button" class="button button-block button-large-custom" ng-click="reviewSubmit();">
          Submit Review
        </button>
      </div>
      <div style="margin-top:15px;color:{{reviewColor}};">{{reviewMsg}}</div>
    </div>
  </div>
</ion-content>

The controller function responsible for dynamically changing star colors:

  $scope.reviewRating = function(idName,ID,rating) {
    for (var i=1;i<=5;i++) {
      var tName = idName+ "_" +ID+ "_" +i ;
      console.log(tName) ;
      var star = document.getElementById(tName) ;
      if (i <= rating) {
        console.log("Orange") ;
        star.style.color = eColors.orange + " !important" ;      
      } else {
        console.log("Gray") ;
        star.style.color = "lightgray !important" ;
      }
    }
    $scope.userRating = rating ;
    console.log("new rating: " +$scope.userRating) ;
  }

The console messages indicate that the function is executing correctly and assigning the new rating to $scope.userRating. However, visually, the star colors remain unchanged - displaying only two orange stars:

Rating_1135_1 = Orange    controllers.js:2705 
Rating_1135_2 = Orange    controllers.js:2705 
Rating_1135_3 = Orange    controllers.js:2705 
Rating_1135_4 = Orange    controllers.js:2705 
Rating_1135_5 = Gray      controllers.js:2708 
new rating: 4             controllers.js:2712

This issue occurs only when a previous review/data is loaded from the server - it works fine when no existing data is present, even allowing users to save their reviews, exit the modal, and return later to make modifications. It seems to be specifically related to refreshing or fetching new data from the server when an existing review is already stored.