Service example

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;
});

<!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>

/* CSS goes here */

.border {
  border: 1px solid blue;
  margin: 3px;
  padding: 5px;
}