Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Oliver Jochmann
Oliver Jochmann
6,564 Points
Posted by Oliver Jochmann
Oliver Jochmann
6,564 Points

AngularJS, need help with Controller and how to set up a variable

I am trying to set up a simple calculator using AngularJS.

I cannot get the functions I define in the controller to work in the html, and I am not sure how to even output the data I want.

Also, how can I store the operator definded by the button press into a variable, so that I can basically {{first operator second}?

Does AngularJS not load because I am loading the file from explorer? Do I have to upload it to get the AngularJS src to load correctly?

Any help is greatly appreciated. Cheers!

html
<!DOCTYPE html>
<html>
<head>
  <title>Calculator</title>

</head>

<body ng-app="calculatorApp">
  <div ng-controller="mainCtrl">
    <input type="number" ng-model="first" autofocus>
    <input type="number" ng-model="second">
    <br>
    <button onClick="defineOperator('+')">+</button>
    <button onClick="defineOperator('-')">-</button>
    <button onClick="test()">TEST</button>
    <br>
  </div>
<div>
  {{first + second}}

</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
<script src="scripts/app.js" type="text/javascript"></script>
<script src="scripts/controllers/main.js" type="text/javascript"></script>
</body>
</html>

js

angular.module('calculatorApp', [])
  .controller('mainCtrl', function($scope){

    var;

    $scope.defineOperator = function(choice) {
        operator = choice;
    };
    $scope.testOperator = function(click) {
      alert("You chose " + operator);
    };
  });