w3s106-AngularJS Directives Data Binding

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div data-ng-app="" data-ng-init="quantity=1;price=5">

<h2>Cost Calculator</h2>

Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p><b>Total in dollar:</b> {{quantity * price}}</p>

</div>

</body>
</html>

// Code goes here

/* Styles go here */

<div>
w3s106-AngularJS Directives Data Binding
<br/>
code example:
  <hr>
  index.html
  <br/>
  <textarea 
  id='codeoutput' 
  style="width: 100%;height: 300px;background-color: #dffff4;
      font-size: 1em;font-family: Verdana, Arial, Helvetica, sans-serif;
      border: 1px solid black;">
      
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div data-ng-app="" data-ng-init="quantity=1;price=5">

<h2>Cost Calculator</h2>

Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p><b>Total in dollar:</b> {{quantity * price}}</p>

</div>

</body>
</html>

  </textarea>

  
  <hr/>
  <iframe 
  allowfullscren="allowfullscren" 
  frameborder="0" 
  src="https://embed.plnkr.co/Yni8li1w6CmsD9rPW33q?show=preview" 
  style="height: 400px; width: 100%;">
  </iframe>
  <hr> 
https://www.w3schools.com/angular/angular_directives.asp
  <hr> 
  201603
</div>

<div>
[TITLE]
<br/>
code example:
  <hr>
[SCRIPTNAME]
  <br/>
  <textarea 
  id='codeoutput' 
  style="width: 100%;height: 300px;background-color: #dffff4;
      font-size: 1em;font-family: Verdana, Arial, Helvetica, sans-serif;
      border: 1px solid black;">
      
[SCRIPTCODES]
    
  </textarea>

  
  <hr/>
  <iframe 
  allowfullscren="allowfullscren" 
  frameborder="0" 
  src="https://embed.plnkr.co/[SCRIPTID]?show=preview" 
  style="height: 400px; width: 100%;">
  </iframe>
  <hr> 
[REF]
  <hr> 
  201603
</div>