title: Update span inner html dynamically on select box change in angularjs
body: <p>I have multiple select box on a page with each select box have a span listing its price. On select box change the price update dynamically based on the item. How I can achieve this using angularjs ? </p>
  
  <p>My Code below</p>
  
  <pre><code>&lt;div ng-repeat="items in itemsList" class="col-md-3 col-sm-3 "&gt;
  
      &lt;div class="product product-category"&gt;
          &lt;div class="details"&gt;
              &lt;img src="resources/images/itemImages/{{items.image}}" style="width:159;height:159;" class="image" /&gt;
              &lt;h4 class="name"&gt;{{items.name}}&lt;span class="quality"&gt;(Quality)&lt;/span&gt;&lt;/h4&gt;
              &lt;h4 class="info"&gt;{{items.description}}&lt;/h4&gt;
              &lt;select id="unit{{items.id}}" ng-init="itemUnitsSelected = items.itemUnitPrices[0]" ng-model="itemUnitsSelected" ng-change="changedValue(itemUnitsSelected, '{{items.id}}')" data-ng-options="XYZ as XYZ.unit.name for XYZ in items.itemUnitPrices track by XYZ.id " class="form-control item-count"&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="cart-feature"&gt;
              &lt;h5 class="price"&gt;
                &lt;span class="rate original"&gt;&lt;/span&gt;
                &lt;span class="rate  discounted" price="{{items.itemUnitPrices[0].itemPrice}}" id="discountedAmount{{items.id}}"&gt;Rs. {{items.itemUnitPrices[0].itemPrice}}&lt;/span&gt;
                &lt;/h5&gt;
              &lt;div class="cart-option"&gt;
                  &lt;span class="tag"&gt;Qty &lt;/span&gt;
                  &lt;span class="quantity"&gt;
                    &lt;input type="text" value="1" id="qty{{items.id}}" class="form-control" /&gt;
                  &lt;/span&gt;
                  &lt;a href="javascript:return;" class="event" ng-click="addItemToCart(items.id,items.name)"&gt;
                      &lt;span class="cart-btn"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>On my controller currently I am updating value through javascript, I want to change and bind it using angularjs.</p>
  
  <pre><code> $scope.changedValue=function(item,itemId){
  
      document.getElementById("discountedAmount"+itemId).innerHTML = "Rs. "+item.itemPrice;
      document.getElementById("discountedAmount"+itemId).setAttribute("price", item.itemPrice);
   }; 
  </code></pre>