<html ng-app="counterApp"> <head> <title>Servant: counter</title> <style> body { text-align: center; } #counter { color: green; } #inc { margin: 0px 20px; background-color: green; color: white; } </style> <script src="angular.min.js" type="text/javascript"></script> <script src="api.js" type="text/javascript"></script> </head> <body ng-controller="CounterCtrl"> <h1>Angular version</h1> <span id="counter">{{ 'Counter: ' + counter }}</span> <button ng-click="incCounter()" id="inc">Increase</button> <script type="text/javascript"> var counterApp = angular.module('counterApp', []); counterApp.controller('CounterCtrl', ['$scope', '$http', '$interval', function ($scope,$http, $interval) { // Let's define how we publish information to the $scope var publishCounter = function (response) { $scope.counter = response.value; }; $scope.getCounter = function() { getCounter($http) .success(publishCounter); } $scope.incCounter = function() { postCounter($http) .success(publishCounter); } // Initialize the counter on load $scope.getCounter(); // we update the value every 1sec, in the same way $interval($scope.getCounter, 1000); }]); </script> </body> </html>