title: Dynamically change a tag content on click
body: <p><a href="https://i.stack.imgur.com/UIZLM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UIZLM.png" alt="enter image description here"></a></p>
  
  <p>I am trying to change value of subtotal field dynamically using angular js. I am stucked at a point. When I click on a <code>Remove</code> it removes the particular field using jquery.</p>
  
  <p>On removing the a particular item the <code>subtotal</code> value should also change. How to achieve this?</p>
  
  <p>Here is code which I tried.</p>
  
  <p><strong>Html file-</strong></p>
  
  <pre><code>&lt;div  data-ng-app="myApp" ng-controller="CalController" id="parentContainer"&gt;
  
  &lt;div class="itemsQuantity" data-id=""&gt;
  &lt;span&gt;Remove &amp;nbsp;&lt;/span&gt;
  Qty: &lt;input  ng-model="firstItem" type="text" ng-change="calculateFirst()"/&gt;
  &lt;div id="productOne"&gt; Rs {{firstCalculation}} &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="itemsQuantity" data-id=""&gt;
  &lt;span&gt;Remove &amp;nbsp;&lt;/span&gt;
  Qty: &lt;input ng-model="secondItem" type="text" ng-change="calculateSecond()" /&gt;
  &lt;div id="productTwo"&gt; Rs {{secondCalculation}} &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="itemsQuantity" data-id=""&gt;
  &lt;span&gt;Remove &amp;nbsp;&lt;/span&gt;
  Qty: &lt;input ng-model="thirdItem" type="text" ng-change="calculateThird()"/&gt;
  &lt;div id="productThree"&gt; Rs {{thirdCalculation}} &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Subtotal --&gt;
  &lt;div&gt;
  Subtotal: 
  &lt;p id="finalPrice"&gt;Rs {{firstCalculation + secondCalculation + thirdCalculation}}&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Js File</strong></p>
  
  <pre><code>$j = jQuery.noConflict();
  
  $j.getJSON("https://api.myjson.com/bins/41hjl",function(response){
      var availableSections = $j(".itemsQuantity");
  
      for(i=0; i&lt;response.product_id_count.length; i++){
          $j(availableSections[i]).attr("data-id",response.product_id_count[i]);
      }
  });
  var myApp = angular.module('myApp',[]);
  
  myApp.controller('CalController', ['$scope', function($scope) {
    $scope.firstCalculation = 200;
    $scope.secondCalculation = 400;
    $scope.thirdCalculation = 600;
  
        $scope.calculateFirst = function() {
          $scope.firstCalculation = $scope.firstItem*200;
      };
  
        $scope.calculateSecond = function() {
          $scope.secondCalculation = $scope.secondItem*400;
      };
  
        $scope.calculateThird = function() {
          $scope.thirdCalculation = $scope.thirdItem*600;
      };
  
      $j(".itemsQuantity span").on('click',function(){
          var removeProduct = $j(this).parent().attr("data-id");
          $j(this).parent().remove();
      });
  
  }])
  </code></pre>