<style>
.calcu{
  width:200px;
  margin:50px auto;
  padding:20px;
  border:1px solid #323232;
  border-radius:6px;
 }
 .h2{
  text-align:center;
  margin-top:0px;
 }
 .row{
  width:95%;
  margin:auto;
  clear:both;
 }
 .button{
  display:inline-block;
  width:20px;
  padding:10px;
  background-color:#ccc;
  margin:2px;
  text-align:center;
 }
 .button:hover{
  background-color:#323232;
  color:#fff;
  cursor:pointer;
 }
 .result{
  background-color:#C3E4ED;
  padding-right:5px;
  border:1px solid #fff;
  width:100%;
  height:30px;
  text-align:right;
  font-weight:bold;
 }
 .val{
  margin-bottom:10px;
 }

</style>

<div class="calcu" ng-app="" ng-controller="calcaController" >
 <h2>Calculator</h2>
 <div class="row val">
  <input class="result" type="text" ng-model="calc.res" />
 </div>
 <div class="button-set">
 <div class="row">
  <div class="button" ng-click="calc.res= calc.res+'1';">1</div>
  <div class="button" ng-click="calc.res= calc.res+'2';">2</div>
  <div class="button" ng-click="calc.res= calc.res+'3';">3</div>
  <div class="button" ng-click="calc.res= calc.res+'4';">4</div> 
 </div>
 <div class="row">
  <div class="button" ng-click="calc.res= calc.res+'5';">5</div>
  <div class="button" ng-click="calc.res= calc.res+'6';">6</div>
  <div class="button" ng-click="calc.res= calc.res+'7';">7</div>
  <div class="button" ng-click="calc.res= calc.res+'8';">8</div> 
 </div>
 <div class="row">
  <div class="button" ng-click="calc.res= calc.res+'9';">9</div>
  <div class="button" ng-click="calc.res= calc.res+'0';">0</div>
  <div class="button" ng-click="calc.res= calc.res+'+';">+</div>
  <div class="button" ng-click="calc.res= calc.res+'-';">-</div> 
 </div>
 <div class="row">
  <div class="button" ng-click="calc.res= calc.res+'*';">*</div>
  <div class="button" ng-click="calc.res= calc.res+'/';">/</div>
  <div class="button" ng-click="calc.res=calc.calculate();">=</div>
  <div class="button" ng-click="calc.res= calc.clear();">C</div> 
 </div>
 </div>
</div> 
<script>
function calcaController($scope) {
 $(".result").focus();
    $scope.calc = {
        res: '',
  calculate:function(){
   var x = $scope.calc;
   return eval(x.res);
  },
  clear:function(){
   $(".result").focus();
   return '';
  }
    };
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>