Сначала убедитесь, что ваше приложение и имя контроллера совпадают в файлах html и js.
также я получаю eeror, который вы положили в js файл, упомяните ниже.
var app = angular.module('calculator', []);
Â
app.controller("calculatorCtrl", function($scope) {
$scope.countArr = [];
Uncaught ReferenceError: Â is not defined
ниже правильный ответ: Html file
<!doctype html>
<html ng-app="calculator" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="scripts/angularCalculator.js"></script>
<link rel="src/styles.css" href="styles.css"/>
</head>
<body ng-controller="calculatorCtrl">
<div class="whole-container">
<div class="result-container">
{{firstValue || 0 }}
<span ng-if="currentModifier">{{currentModifier}}</span>
<span ng-if="secondValue">{{ secondValue }}</span>
<span ng-if="result" class="result-item"> = {{ result }}</span>
<button class="clear-button" ng-click="clearNumbers()">X</button>
</div>
<div class="number-modify-container">
<div class="number-container">
<div class="number-inner-container" ng-repeat="num in numArr">
<button class="number-item" ng-click="showNumber(num)">{{ num }}</button>
<button class="number-item" ng-if="$index == 9" ng-click="showNumber('.')"> . </button>
</div>
</div>
<div class="modify-container">
<button class="modify-item" ng-repeat="mod in modifiers" ng-click="makeSecondValue(mod)">{{ mod }}
</button>
</div>
</div>
<button class="result-button" ng-click="doMath()">=</button>
</div>
</body>
</html>
Js файл
'use strict'
var app = angular.module('calculator', []);
app.controller("calculatorCtrl", function($scope) {
$scope.countArr = [];
$scope.myValues = ['+', '-', '*', '/'];
$scope.firstVal = "";
$scope.secondVal = "";
$scope.currentModifier = "";
var valueFlag = false;
for (var i = 9; i >= 0; i--) {
$scope.countArr.push(i);
}
function currentValueDisplay(num) {
assignValues(num);
}
function assignValues(num) {
if (valueFlag) {
$scope.secondVal += num;
} else {
$scope.firstVal += num;
}
}
$scope.numberDisplay = currentValueDisplay;
function activateFlag() {
valueFlag = true;
}
function setCurrentModifier(modifier) {
activateFlag();
$scope.currentModifier = modifier;
}
$scope.createSecondValue = setCurrentModifier;
function evalMath() {
if ($scope.firstVal != '' && $scope.secondVal != '') {
var mathFormat = $scope.firstVal + $scope.currentModifier + $scope.secondVal;
$scope.result = eval(mathFormat);
}
}
$scope.doMath = evalMath;
function clearScope() {
valueFlag = false;
$scope.firstVal = '';
$scope.secondVal = '';
$scope.currentModifier = '';
$scope.result = '';
}
$scope.clearNumbers = clearScope;
});