how to add dynamic id on div based on the value of selected option of dropdown in angularjs onchange

Question

Here I have select box,onchange of dropdown I need to add dynamic id on div based on the value of selected option of dropdown .I have mentioned in alert what id to be add onchange.Here is the code below

html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div id=""></div>

script

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.update = function() { 
   if($scope.x == 'city'){
   alert('add id as city1 inside ablove div');
   }
   if($scope.x == 'state'){
   alert('add id as mystate inside ablove div');
   }
   if($scope.x == 'country'){
   alert('add id as mycountry inside ablove div');
   }

}
});

Answer 1

You can do this in your HTML:

<div id="{{id}}"></div>

And you can do this in your update() function:

$scope.update = function() { 
   if($scope.x == 'city'){
       $scope.id = 'city1';
   } 
   if($scope.x == 'state'){
       $scope.id = 'mystate';
   }
   if($scope.x == 'country'){
       $scope.id = 'mycountry';
   }

}

Answer 2

 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.update = function() { if ($scope.x == 'city') { $scope.selectedValue = 'cityName'; } else if ($scope.x == 'state') { $scope.selectedValue = 'stateName'; } else if ($scope.x == 'country') { $scope.selectedValue = 'countryName'; } else { $scope.selectedValue = ''; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <select class="change" ng-model="x" ng-change="update()"> <option value="">Please Select</option> <option value="city">Cities</option> <option value="state">States</option> <option value="country">Countries</option> </select> <span ng-if="selectedValue">You have selected :- {{selectedValue}}</span> </div> 

Answer 3

  you need to use ngChange and pass ngModel object as argument to your ngChange function
    **Example:**
    <div ng-app="App" >
      <div ng-controller="ctrl">
        <select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" 
                data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
          <option value="">Select Account</option>
        </select>
        {{itemList}}     
      </div>       
    </div>
js:
function ctrl($scope) {
  $scope.itemList = [];
  $scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];

  $scope.changedValue = function(item) {
    $scope.itemList.push(item.name);
  }       
}
Live example: http://jsfiddle.net/choroshin/9w5XT/4/