var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-semver="1.2.19"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="count=0; leftCurly = '{'">
<h1>Angular: <blue>button</blue> with <strong>ng-click</strong> and <red>binding</red></h1>
<pre><blue><button</blue> <strong>ng-click="count = count + 1"</strong><blue>></blue><red>{{leftCurly}}{count}}</red><blue></button></blue></pre>
<button ng-click="count = count + 1">{{count}}</button>
<p class="click-it">Click the button ➙<p>
<ul>
<li><blue>Button element is standard html</blue></li>
<li><strong>ng-click: creates an expression to increment variable <code>count</code> by 1 when the button is clicked</strong></li>
<li style="margin-bottom: 50px;"><red>Curly braces create an Angular binding that evaluates the contained expression</red></li>
</ul>
</body>
</html>
/* Put your css in here */
body { padding: 50px 100px; min-width: 500px; }
h1 { margin-bottom: 50px; }
p { margin: 5px 0; }
button { padding: 20px 100px; border-radius: 10px; font-size: 30px; cursor: pointer; outline: none; }
.click-it { font-size: 20px; float: left; margin-top: 25px; margin-right: 20px; }
button code { font-size: 16px; padding-bottom: 10px; display: inline-block; }
blue { color: #0000cf; }
red { color: #cf0000;}
strong { color: #008a00;}
pre { margin-bottom: 30px; font-size: 16px; }