Scope Tut

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="transactionApp">
  
  <div ng-app="transactionApp">
    <div ng-controller="transactionCtrl">
      Current Balance: {{balance}}
      <br/>Transaction history:
      <ul>
        <li ng-repeat="transaction in transactions">
          <!-- UNCOMMENT TO SEE SCOPE DIGEST LOOP ERROR
            <br/>Balance: {{updateBalance(balance, transaction)}}
          -->
          <button ng-click="clickBalance( transaction )">Transaction:{{transaction}}</button>
        </li>
      </ul>
    </div>
  </div>
  
  <div id="output"></div>
</body>

</html>

// Code goes here

var transactionApp = angular.module('transactionApp', []);

transactionApp.controller("transactionCtrl", function($scope, $timeout) {
    $scope.transactions = [100, -200, 500, 10000, -2000];
    $scope.balance = 20000;
    $scope.clickBalance = function(transaction) {
      return $scope.balance += transaction;
    };
    $scope.updateBalance = function(balance, transaction) {
      $timeout(function(){
        return $scope.balance += transaction;
      }, 500);
    };
    
    (function(){
      var bal = 20000;
      
      $scope.transactions.forEach(function(transaction){
        bal += transaction;
      });
      
      var output = document.getElementById('output');
      output.innerHTML = "Remaining Balance: " + bal;
    }());
  });

/* Styles go here */