title: Angularjs action on click of button
body: <p>I am trying to do some calculation but it is getting done as soon as I enter the amount. I just want this to happen on click of a button rather than automatically.</p>
  
  <p>What I have done so far:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myAppModule"&gt;
    &lt;head&gt;
      &lt;title&gt;Angular JS - programming-free.com&lt;/title&gt;
      &lt;link href="https://dl.dropbox.com/u/96099766/DetailModalExample/bootstrap.css"  rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript" src="lib/angularjs.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div ng-controller="myAppController" style="text-align:center"&gt;
        &lt;p style="font-size:28px;"&gt;
          Enter Quantity:
          &lt;input type="text" ng-model="quantity"/&gt;
        &lt;/p&gt;
        &lt;h2&gt;Total Cost: Rs.{{calculateval(quantity,10)}}&lt;/h2&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
        var myAppModule = angular.module('myAppModule', []);
        myAppModule.controller('myAppController', function($scope,calculateService) {
          $scope.quantity=1;
          $scope.calculateval = function(xval,yval) {                       
            return calculateService.calculate(xval,yval);
          }
        });
        // Service 
        myAppModule.factory('calculateService', function(){
          return {
            calculate: function(xval,yval){
              return xval*yval;
            }  
          }               
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>