Simple Calculator using AngularJS

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<style>
p {
    font-size: 12px;
}

.thinborder {
    border: 1px solid #ccc;
    width: 190px;
    height: 60px;
    background: black;
}

.calcbuttons {
    padding: 8px;
}

.numberbutton {
    width: 40px;
}

.operationbutton {
    width: 40px;
}

.clearbutton {
    width: 40px;
    background-color: green;
    color: white;
}

.output {
    background: black;
    color: lime;
    font-family: "Courier New", Courier;
    padding: 0 10px;
    text-align: right;
    font-size: 14px;
}

.calcbody {
    background: #306;
    width: 210px;
    padding: 10px;
    box-shadow: 5px 5px 5px #888888;
    border-radius: 12px;
}
</style>
<div ng-app ng-controller="Ctrl">
    <div class="calcbody">
        <div class="thinborder">
            <p class="output" name="output">
                {{output}}
                <br>{{operationToken}}
            </p>
        </div>
        <div class="calcbuttons">
            <button name="btn1" class="numberbutton"
                value="1" ng-click='updateOutput(1)'>1</button>
            <button name="btn2" class="numberbutton"
                value="2" ng-click='updateOutput(2)'>2</button>
            <button name="btn3" class="numberbutton"
                value="3" ng-click='updateOutput(3)'>3</button>
            <button name="btnMinus" class="operationbutton"
                ng-click='subtract()'>-</button>
            <br>
            <button name="btn4" class="numberbutton"
                value="4" ng-click='updateOutput(4)'>4</button>
            <button name="btn5" class="numberbutton"
                value="5" ng-click='updateOutput(5)'>5</button>
            <button name="btn6" class="numberbutton"
                value="6" ng-click='updateOutput(6)'>6</button>
            <button name="btnPlus" class="operationbutton"
                ng-click='add()'>+</button>
            <br>
            <button name="btn7" class="numberbutton"
                value="7" ng-click='updateOutput(7)'>7</button>
            <button name="btn8" class="numberbutton"
                value="8" ng-click='updateOutput(8)'>8</button>
            <button name="btn9" class="numberbutton"
                value="9" ng-click='updateOutput(9)'>9</button>
            <button name="btnEquals" class="operationbutton"
                ng-click='calculate()'>=</button>
            <br>
            <button name="btn0" class="numberbutton"
                value="0" ng-click='updateOutput(0)'>0</button>
            <button name="btnClear" class="clearbutton"
                ng-click='clear()'>C</button>
            <button name="btnMul" class="operationbutton"
                ng-click='mul()'>*</button>
            <button name="btnDiv" class="operationbutton"
                ng-click='div()'>/</button>
        </div>
    </div>
</div>
<script>
function Ctrl($scope)
{
    $scope.output = "0";
    $scope.newNumber = true;
    $scope.pendingOperation = null;
    $scope.operationToken = "";
    $scope.runningTotal = null;
    $scope.pendingValue = null;
    $scope.lastOperation = null;
    var ADD = "adding";
    var SUBTRACT = "subtracting";
    var MULTIPLY = "multiplication";
    var DIVISION = "division";
    var ADD_TOKEN = "+";
    var SUBTRACT_TOKEN = "-";
    var MULTIPLY_TOKEN = "*";
    var DIVISION_TOKEN = "/";
    $scope.updateOutput = function(btn)
    {
        if ($scope.output == "0" || $scope.newNumber)
        {
            $scope.output = btn;
            $scope.newNumber = false;
        }
        else
        {
            $scope.output += String(btn);
        }
        $scope.pendingValue = toNumber(
            $scope.output);
    };
    $scope.add = function()
    {
        if ($scope.pendingValue)
        {
            if ($scope.runningTotal && $scope.pendingOperation ==
                ADD)
            {
                $scope.runningTotal += $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                SUBTRACT)
            {
                $scope.runningTotal -= $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                MULTIPLY)
            {
                $scope.runningTotal *= $scope.pendingValue;
            }
            else
            {
                $scope.runningTotal = $scope.pendingValue;
            }
        }
        setOperationToken(ADD);
        setOutput(String($scope.runningTotal));
        $scope.pendingOperation = ADD;
        $scope.newNumber = true;
        $scope.pendingValue = null;
    };
    $scope.div = function()
    {
        if ($scope.pendingValue)
        {
            if ($scope.runningTotal && $scope.pendingOperation ==
                ADD)
            {
                $scope.runningTotal += $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                SUBTRACT)
            {
                $scope.runningTotal -= $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                MULTIPLY)
            {
                $scope.runningTotal *= $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                DIVISION)
            {
                $scope.runningTotal /= $scope.pendingValue;
            }
            else
            {
                $scope.runningTotal = $scope.pendingValue;
            }
        }
        setOperationToken(DIVISION);
        setOutput(String($scope.runningTotal));
        $scope.pendingOperation = DIVISION;
        $scope.newNumber = true;
        $scope.pendingValue = null;
    };
    $scope.mul = function()
    {
        if ($scope.pendingValue)
        {
            if ($scope.runningTotal && $scope.pendingOperation ==
                ADD)
            {
                $scope.runningTotal += $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                SUBTRACT)
            {
                $scope.runningTotal -= $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                MULTIPLY)
            {
                $scope.runningTotal *= $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                DIVISION)
            {
                $scope.runningTotal /= $scope.pendingValue;
            }
            else
            {
                $scope.runningTotal = $scope.pendingValue;
            }
        }
        setOperationToken(MULTIPLY);
        setOutput(String($scope.runningTotal));
        $scope.pendingOperation = MULTIPLY;
        $scope.newNumber = true;
        $scope.pendingValue = null;
    };
    $scope.subtract = function()
    {
        if ($scope.pendingValue)
        {
            if ($scope.runningTotal && ($scope.pendingOperation ==
                    SUBTRACT))
            {
                $scope.runningTotal -= $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation == ADD)
            {
                $scope.runningTotal += $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                MULTIPLY)
            {
                $scope.runningTotal *= $scope.pendingValue;
            }
            else if ($scope.runningTotal &&
                $scope.pendingOperation ==
                DIVISION)
            {
                $scope.runningTotal /= $scope.pendingValue;
            }
            else
            {
                $scope.runningTotal = $scope.pendingValue;
            }
        }
        setOperationToken(SUBTRACT);
        setOutput(String($scope.runningTotal));
        $scope.pendingOperation = SUBTRACT;
        $scope.newNumber = true;
        $scope.pendingValue = null;
    };
    $scope.calculate = function()
    {
        if (!$scope.newNumber)
        {
            $scope.pendingValue = toNumber(
                $scope.output);
            $scope.lastValue = $scope.pendingValue;
        }
        if ($scope.pendingOperation == ADD)
        {
            $scope.runningTotal += $scope.pendingValue;
            $scope.lastOperation = ADD;
        }
        else if ($scope.pendingOperation ==
            SUBTRACT)
        {
            $scope.runningTotal -= $scope.pendingValue;
            $scope.lastOperation = SUBTRACT;
        }
        else if ($scope.pendingOperation ==
            MULTIPLY)
        {
            $scope.runningTotal *= $scope.pendingValue;
            $scope.lastOperation = MULTIPLY;
        }
        else if ($scope.pendingOperation ==
            DIVISION)
        {
            $scope.runningTotal /= $scope.pendingValue;
            $scope.lastOperation = DIVISION;
        }
        else
        {
            if ($scope.lastOperation)
            {
                if ($scope.lastOperation == ADD)
                {
                    if ($scope.runningTotal)
                    {
                        $scope.runningTotal += $scope.lastValue;
                    }
                    else
                    {
                        $scope.runningTotal = 0;
                    }
                }
                else if ($scope.lastOperation ==
                    SUBTRACT)
                {
                    if ($scope.runningTotal)
                    {
                        $scope.runningTotal -= $scope.lastValue;
                    }
                    else
                    {
                        $scope.runningTotal = 0;
                    }
                }
                else if ($scope.lastOperation ==
                    MULTIPLY)
                {
                    if ($scope.runningTotal)
                    {
                        $scope.runningTotal *= $scope.lastValue;
                    }
                    else
                    {
                        $scope.runningTotal = 0;
                    }
                }
                else if ($scope.lastOperation ==
                    DIVISION)
                {
                    if ($scope.runningTotal)
                    {
                        $scope.runningTotal /= $scope.lastValue;
                    }
                    else
                    {
                        $scope.runningTotal = 0;
                    }
                }
            }
            else
            {
                $scope.runningTotal = 0;
            }
        }
        setOutput($scope.runningTotal);
        setOperationToken();
        $scope.pendingOperation = null;
        $scope.pendingValue = null;
    };
    $scope.clear = function()
    {
        $scope.runningTotal = null;
        $scope.pendingValue = null;
        $scope.pendingOperation = null;
        setOutput("0");
    };
    setOutput = function(outputString)
    {
        $scope.output = outputString;
        $scope.newNumber = true;
    };
    setOperationToken = function(operation)
    {
        if (operation == ADD)
        {
            $scope.operationToken = ADD_TOKEN;
        }
        else if (operation == SUBTRACT)
        {
            $scope.operationToken =
                SUBTRACT_TOKEN;
        }
        else if (operation == MULTIPLY)
        {
            $scope.operationToken =
                MULTIPLY_TOKEN;
        }
        else if (operation == DIVISION)
        {
            $scope.operationToken =
                DIVISION_TOKEN;
        }
        else
        {
            $scope.operationToken = "";
        }
    };
    toNumber = function(numberString)
    {
        var result = 0;
        if (numberString)
        {
            result = numberString * 1;
        }
        return result;
    };
}
</script>