Factory vs Service

angularjs factory vs service do the same thing, just a different way of instantiation

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<script src="&lt;link href=&quot;http://twitter.github.com/bootstrap/assets/css/bootstrap.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<div ng-controller="ServiceCtrl">
    
    
    <!-- this is never updated after count is changed! -->
    <p> This is my countService variable : {{countService}}</p>
    
    <p> This is my updated after click variable : {{countS}}</p>
    
    <button ng-click="clickS()" >Service ++ </button>
</div>
<br />
<div ng-controller="FactoryCtrl">
    
    <!--  this is never updated after count is changed! -->
    <p> This is my countFactory variable : {{countFactory}}</p>
    
    <p> This is my updated after click variable : {{countF}}</p>
    
    <button ng-click="clickF()" >Factory ++ </button>
</div>

JavaScript

//angular.js example for factory vs service
var app = angular.module('myApp', []);
    
app.factory('testFactory', function(){
    var countF = 1;
    return {
        getCountF : function () {
            countF++;
            return countF;
        }
    }               
});

app.service('testService', function(){
    var count = 1;
    this.getCount = function () {
            count++;
            return count;
    };
    
});

function ServiceCtrl($scope, testService, testFactory)
{
    $scope.countService = testService.getCount();
     $scope.clickS = function () {
        $scope.countS = testService.getCount();
    };

}

function FactoryCtrl($scope, testService, testFactory)
{
    $scope.countFactory = testFactory.getCountF();
    $scope.clickF = function () {
        $scope.countF = testFactory.getCountF();
    };
}