app.js
                    
var app = angular.module('service-example', []);
app.controller('FirstCtrl', function($scope, $timeout, ListService) {
$scope.listSize = ListService.size();
$scope.addToList = function(value) {
ListService.addItem(value);
$scope.listSize = ListService.size();
};
function startPolling() {
$scope.listSize = ListService.size();
timeoutId = $timeout(function() {
$scope.listSize = ListService.size();
startPolling();
}, 1000);
}
startPolling();
});
app.controller('SecondCtrl', function($scope, $timeout, ListService) {
$scope.listSize = ListService.size();
$scope.addToList = function(value) {
ListService.addItem(value);
$scope.listSize = ListService.size();
};
function startPolling() {
$scope.listSize = ListService.size();
timeoutId = $timeout(function() {
$scope.listSize = ListService.size();
startPolling();
}, 1000);
}
startPolling();
});
app.controller('ThridCtrl', function($scope, ListService) {
$scope.refresh = function() {
$scope.list = angular.copy(ListService.getAllItems());
};
});
app.controller('FourthCtrl', function($scope, ListService) {
$scope.list = ListService.getAllItems();
});
// The Service
app.factory('ListService', function() {
var ListService = {};
var list = [];
ListService.getItem = function(index) {
return list[index];
};
ListService.addItem = function(item) {
list.push(item);
};
ListService.removeItem = function(item) {
list.splice(list.indexOf(item), 1);
};
ListService.size = function() {
return list.length;
};
ListService.getAllItems = function() {
return list;
};
return ListService;
});
                    index.html
                    
<!DOCTYPE html>
<html ng-app="service-example">
<head lang="en">
<meta charset="utf-8">
<title>Service 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>An example of a service</div>
<br/><br/>
<div>Controller 1</div>
<div ng-controller="FirstCtrl" class="border">
List Size: {{listSize}}
<br/>
<input type="text" ng-model="listValue" />
<input type="button" ng-click="addToList(listValue)" value="Add" />
</div>
<br/><br/><br/>
<div>Controller 2</div>
<div ng-controller="SecondCtrl" class="border">
List Size: {{listSize}}
<br/>
<input type="text" ng-model="listValue" />
<input type="button" ng-click="addToList(listValue)" value="Add" />
</div>
<br/><br/><br/>
<div>Controller 3</div>
<div ng-controller="ThridCtrl" class="border">
Display List Values <input type="button" value="Refresh" ng-click="refresh()" />
<br/>
<ul>
<li ng-repeat="value in list">
{{value}}
</li>
</ul>
</div>
<br/><br/><br/>
<div>Controller 4</div>
<div ng-controller="FourthCtrl" class="border">
Display List Values
<br/>
<ul>
<li ng-repeat="value in list">
{{value}}
</li>
</ul>
</div>
</body>
</html>
                    style.css
                    
/* CSS goes here */
.border {
border: 1px solid blue;
margin: 3px;
padding: 5px;
}