How to work with dynamically added ng-change?

Question

JavaScript

There are dynamically added selects with efforts inside, a flag hangs on each country and I use ng-change to pull it out as a background, because it is not friendly with block elements inside itself. For the first select, ng-change="update()" works, but not for dynamically added ones, what's the problem?

<select class="language"  ng-model="selectedItem" ng-change="update()" >
                          <option value="">---Please select---</option>
                          <option ng-repeat="language in languages" style="background-image: url(img/{{language.id}}" >
                            {{language.called}}
                          </option>
                        </select>

$scope.update = function (){
   
    img_str=$scope.selectedItem;
    img_str="url(img/"+ img_str+"_flag.jpg)";
    angular.element(document.querySelector(".native select")).css("background-image", img_str);
    console.log(img_str);
  }});

Answer 1

You need to add value attribute to dynamic options