My code snippet is as follows:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="CalculatorController">
Enter a number:
<input type="number" ng-model="number" />
<br /> Enter a number:
<input type="number" ng-model="number2" />
<br />
<div>
<button ng-click="doSquare()">X<sup>2</sup></button>
<button ng-click="doCube()">X<sup>3</sup></button>
</div>
<br />
<div>
<button ng-click="doAdd()">Add</button>
<button ng-click="doSubstract()">Subtract</button>
<button ng-click="doMultiply()">Multiply</button>
<button ng-click="doDivide()">Divide</button>
<button ng-click="doModulus()">Modulus</button>
</div>
<div>Output: {{answer}}</div>
<div>
<button type="button" ng-click="clear('filter')">Clear</button>
</div>
</div>
</div>
<script>
var app = angular.module('app', []);
app.service('MathService', function() {
this.add = function(a, b) {
return a + b
};
this.subtract = function(a, b) {
return a - b
};
this.multiply = function(a, b) {
return a * b
};
this.divide = function(a, b) {
return a / b
};
this.modulus = function(a, b) {
return a % b
};
});
app.service('CalculatorService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a, a);
};
this.cube = function(a) {
return MathService.multiply(a, MathService.multiply(a, a));
};
this.add = function(a, b) {
return MathService.add(a, b);
};
this.subtract = function(a, b) {
return MathService.subtract(a, b);
};
this.multiply = function(a, b) {
return MathService.multiply(a, b);
};
this.divide = function(a, b) {
return MathService.divide(a, b);
};
this.modulus = function(a, b) {
return MathService.modulus(a, b);
};
});
app.controller('CalculatorController', function($scope, CalculatorService) {
$scope.doSquare = function() {
$scope.answer = CalculatorService.square($scope.number);
$scope.answer = CalculatorService.square($scope.number2);
}
$scope.doCube = function() {
$scope.answer = CalculatorService.cube($scope.number);
$scope.answer = CalculatorService.cube($scope.number2);
}
$scope.doAdd = function() {
$scope.answer = CalculatorService.add($scope.number, $scope.number2);
}
$scope.doSubtract = function() {
$scope.answer = CalculatorService.subtract($scope.number, $scope.number2);
}
$scope.doMultiply = function() {
$scope.answer = CalculatorService.multiply($scope.number, $scope.number2);
}
$scope.doDivide = function() {
$scope.answer = CalculatorService.divide($scope.number, $scope.number2);
}
$scope.doModulus = function() {
$scope.answer = CalculatorService.modulus($scope.number, $scope.number2);
}
$scope.clear = function(answer) {
$scope.answer = null;
}
});
</script>
</body>
</html>
I am trying to get the answer by clicking X^2 after entering input in both textboxes. Can someone guide me on how to achieve this? Here's the plunker link for reference: http://plnkr.co/edit/8Y47MDICWdeBTiJzaUnP?p=preview