<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Controller example Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body>
    <h1>Welcome</h1>
    <div>Controller example</div>
    
    <div ng-controller="SpicyCtrl">
      <input ng-model="customSpice" />
      <button ng-click="spicy('chili')">Chili</button>
      <button ng-click="spicy(customSpice)">Custom spice</button>
      <p>The food is {{spice}} spicy!</p>
    </div>
    
    
  </body>

</html>
/* CSS goes here */
var app = angular.module('angularjs-starter', []);

app.controller('SpicyCtrl', function($scope) {
  $scope.spice = 'very';
  $scope.spicy = function(spice) {
    $scope.spice = spice;
  };
});