angular_scope_soup.html

<div ng-app>
  <div ng-controller="AppCtrl">
    <button ng-click="randomName()">Select Random Name</button>
    <button ng-click="resetName()">Reset Name</button>
    <button ng-click="showAsUpperCase()">Show Name In Capital</button>
    <div>Your name is: {{name}} {{lastName}}</div>
    <div>Your name was updated {{updateCounter}} times</div>
  </div>
</div>
<script>
  angular.module('myApp',[]);
	function AppCtrl($scope) {
  	var names = ['Jacob', 'William', 'Michael', 'James', 'Smith', 'Miller'];
    var lastNames = ['Harris', 'Thompson', 'Lewis'];
 		var _initialName;
    
    var initCtrl = function(){
 				$scope.name 			= names[0];
        $scope.lastName 	= lastNames[0];
        _initialName 			= $scope.name;
        _initialLastName 	= $scope.lastName;
        $scope.updateCounter = 0;
    }

    $scope.randomName = function() {
      $scope.name 		= names[Math.floor(Math.random()*names.length)];
      $scope.lastName = lastNames[Math.floor(Math.random()*lastNames.length)];
      $scope.updateCounter++;
    }
    
    // New features..
    $scope.resetName = function() {
      $scope.name 		= _initialName;
      $scope.lastName = _initialLastName;
      $scope.updateCounter++;
    }
    
    $scope.showAsUpperCase = function() {
    	$scope.name 		= $scope.name.toUpperCase();
      $scope.lastName = $scope.lastName.toUpperCase();
    }
    
    $scope.saveNameInDB = function() {
      // Update backend with new name and last name
      // ..
    }
    
    $scope.deleteNameInDb = function() {
    	// Remove name from backend
      // ..
    } 
    
    // And another 100 lines here with other features
    
    initCtrl();
}
</script>