title: angularjs mathematical calculation
body: <p>I'm working on a loan calculator where I use ionic range sliders to select loan amount, interest rate, loan duration etc. Also there's a monthly payment range. This monthly payment range should be calculated like this when loan amount, rate and duration is changed.</p>
  
  <pre><code>(loanamount*interest rate)/loan duration
  </code></pre>
  
  <p>So basically monthly payment range should change when we make changes to loan amount, interest rate, and loan duration. How can I do this?</p>
  
  <p>My code so far:</p>
  
  <pre><code>&lt;content has-header="true"&gt;
  
  
      &lt;div class="item item-divider"&gt;
       Select your Loan Amount : 
      &lt;/div&gt;
      &lt;div class="item range"&gt;
      &lt;div id='slider'&gt;
      &lt;input type="range" name="number" min="100" max="1000000" step="100.00"  ng-model="loanAmount"&gt;
      &lt;font color="#009ACD"&gt;&lt;b&gt;Loan Amount:&lt;/b&gt;&lt;/font&gt; &lt;input type="text" ng-model="loanAmount" min="100" max="1000000" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
       &lt;div class="item item-divider"&gt;
       Select your Interest Rate: 
      &lt;/div&gt;
      &lt;div class="item range"&gt;
      &lt;div id='slider'&gt;
      &lt;input type="range" name="volume" min="0" max="100" step="0.01"  ng-model="interestRate"&gt;
      &lt;font color="#009ACD"&gt;&lt;b&gt;Interest Rate:&lt;/b&gt;&lt;/font&gt; &lt;input type="text" ng-model="interestRate" min="0" max="100" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item item-divider"&gt;
       Select your Loan Term : 
      &lt;/div&gt;
      &lt;div class="item range"&gt;
      &lt;div id='slider'&gt;
      &lt;input type="range" name="volume" min="0" max="30"  ng-model="loanTerm"&gt;
      &lt;font color="#009ACD"&gt;&lt;b&gt;Loan Term:&lt;/b&gt;&lt;/font&gt; &lt;input type="text" ng-model="loanTerm" min="0" max="30" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item item-divider"&gt;
       Your Monthly Payment : 
      &lt;/div&gt;
      &lt;div class="item range"&gt;
      &lt;div id='slider'&gt;
      &lt;input type="range" name="volume" min="0" max="1000000"   ng-model="monthlyPayment"&gt;
      &lt;font color="#009ACD"&gt;&lt;b&gt;Monthly Payment:&lt;/b&gt;&lt;/font&gt; &lt;input type="text" ng-model="monthlyPayment" min="0" max="1000000" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;center&gt;&lt;button class="button button-positive" type="reset" ng-click="reset()"&gt;
       &amp;nbsp;&amp;nbsp;Reset&amp;nbsp;&amp;nbsp;&amp;nbsp;
      &lt;/button&gt;&lt;/center&gt;
  &lt;/content&gt;
  </code></pre>
  
  <p>can I do this inside the HTML itself or inside the controller?</p>