Dynamic display of Ionic ratings - ionic 1

[Brad19]

I'm trying to display the ratings dynamically based on the http response. I've used https://www.npmjs.com/package/ionic-ratings for this purpose.

But the problem is that ratings(i.e., stars) are not displayed when it is provided upon request.success() (in this case API returns success). However if I provide the ratings (static) based on how it is defined in ionic-ratings, it's working. I'm not sure if i'm missing something with regards to $scope or anything else, but unclear. I tried to add directives dynamically through innerHTML (plain vanilla js type), but no use. Also i'm relatively new to angular js. I need some help to get this resolved soon. If anyone could advise me on this, that'll be great and helpful.

What am I expecting? Just to be clear, I would like to display the star ratings dynamically based on the API response.

Which Ionic Version? 1.x (Existing app)

What is my Env? Ionic 1 (existing version) npm : ionic-ratings

Here is my code snippet item.html `

    <ion-content overflow-scroll="false">
            <form name="YourDish">
                    **<div class="ratings-overall" id="avgRatings"></div>**
                        <div id="textStyle">
                            <div class="row-no-padding">
                                <div class="padding-detail">
                                        <h2 class="search-heading">{{Model.DishName}}</h2>
                                </div>
                            </div>

                            <div class="row-no-padding">
                                <div class="padding-detail"><a href="#" ng-click="ratings()">{{Model.avgRatings}}</a></div>
                            </div>
                        </div>     
                    </div>
            </form>
</ion-content>`

MyController.js

var request = $http({ method: 'POST', url: appUrl+'/GetRatings', headers: {blah}, transformRequest: blah, data: { Id: itemID } });

`request.success(function(data, status, headers, config){
  if (data != null) {
    console.log('data', data, status);
      **document.getElementById("avgRatings").innerHTML = "<ionic-ratings ratingsobj='avgRatingsObject' index='3'></ionic-ratings>";**
      console.log('rev ratings on success', revRatings);
       $scope.avgRatingsObject = {
            iconOn: 'ion-ios-star',    //Optional
            iconOff: 'ion-ios-star-outline',   //Optional
            iconOnColor: 'rgb(239, 71, 58)',  //Optional
            iconOffColor:  'rgb(200, 100, 100)',    //Optional
            rating: data[0].avgRatings, //Optional
            minRating:1,    //Optional
            readOnly: true, //Optional
            callback: function(rating, index) {    //Mandatory
                console.log('mandatory', rating);
                $scope.ratingsCallback(rating, index);
            }
    };
  } else {
    blah
  }
});
request.error(function(error, status){
  console.log('Error in post', error);
});`

--

But if I provide static ratings like the one below it works item.html `

        <ion-content overflow-scroll="false">
                <form name="YourDish">
                        <div class="ratings-overall">
                         <ionic-ratings ratingsobj='avgRatingsObject' index='3'></ionic-ratings>
                        </div>
                            <div id="textStyle">
                                <div class="row-no-padding">
                                    <div class="padding-detail">
                                            <h2 class="search-heading">{{Model.DishName}}</h2>
                                    </div>
                                </div>

                                <div class="row-no-padding">
                                    <div class="padding-detail"><a href="#" ng-click="ratings()">{{Model.avgRatings}}</a></div>
                                </div>
                            </div>     
                        </div>
                </form>
    </ion-content>

`

And in MyController.js if I provide something like this it works well

`.controller($scope) {
      var request = $http({
  method: 'POST',
  url: appUrl+'/GetRatings',
  headers: {blah},
  transformRequest: blah,
  data: {
    id: itemId
  }
});
request.success(function(data, status, headers, config){
  if (data != null) {
    console.log('data', data, status);
  }  
  } else {
    blah..blah
  }
});
$scope.avgRatingsObject = {
            iconOn: 'ion-ios-star',    //Optional
            iconOff: 'ion-ios-star-outline',   //Optional
            iconOnColor: 'rgb(239, 71, 58)',  //Optional
            iconOffColor:  'rgb(200, 100, 100)',    //Optional
            rating: 2, //Optional
            minRating:1,    //Optional
            readOnly: true, //Optional
            callback: function(rating, index) {    //Mandatory
                console.log('mandatory', rating);
                $scope.ratingsCallback(rating, index);
            }
    };

}