ANgularJS binding element to function output with ng-change

Question

AngularJS beginner here. Writiung a simple page to learn. All it does is take a user input and then apply an operation to it (*10) and display that in the page. I have no idea why this is not working, no value for {{funding.needed}} is ever displayed....any ideas?

  <html ng-app>
<head>
  <title>Learning</title>
</head>
<!--View - user input to collect a value and then apply logic to it-->
    <div>
    <form ng-controller="StartUpController">
        Starting: <input ng-change="computeNeeded()" 
                         ng-model="funding.startingEstimate">
         Recommendation: {{funding.needed}}
    </form>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>

  //startup controller to intiialize variable and computeNeeded function to apply logic
  function StartUpController($scope) {
      $scope.funding = {startingEstimate: 0};  
      };

    $scope.computeNeeded = function(){
     $scope.funding.needed = $scope.funding.startingEstimate * 10;   
    };
</script>
</body>
</html>

score 0 · Accepted Answer · answered Sep 16 '14 at 19:11

The computeNeeded function needs to be included in the controller so it has access to the $scope object:

<script>

  //startup controller to intiialize variable and computeNeeded function to apply logic
  function StartUpController($scope) {
      $scope.funding = {startingEstimate: 0};  


    $scope.computeNeeded = function(){
     $scope.funding.needed = $scope.funding.startingEstimate * 10;   
    };
 };
</script>

ANgularJS binding element to function output with ng-change

1 Answers1