Demo for comparing

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Angular Services</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-app='myApp'>
    <table>
      <thead>
        <tr>
          <td>fromFactory</td>
          <td>fromProvider</td>
          <td>fromService</td>
        </tr>
      </thead>
      <tbody>
        <tr my-directive></tr>
        <tr my-directive></tr>
        <tr my-directive></tr>
        <tr my-directive></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function() {
  return {
    restrict: 'AE',
    scope: {},
    template: "<tr>" + "<td>{{fac}}</td>" + "<td>{{pro}}</td>" + "<td>{{ser}}</td>" + "</tr>",
    controller: function($scope, fromFactory, fromProvider, fromService) {
      $scope.fac = fromFactory;
      $scope.pro = fromProvider;
      $scope.ser = fromService.num++;
    }
  };
});
function myFn() {
  this.num = 0;
  this.$get = function() {
    this.num++;
    return this.num;
  };
  return this.num;
}
myApp.provider('fromProvider', myFn);
myApp.factory('fromFactory', myFn);
myApp.service('fromService', myFn);

/* Styles go here */
table {
  border-left: 1px solid #333;
  border-top: 1px solid #333;
}
td {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}