Service vs Factory

A little example showing the difference between the angular.service() and angular.factory() methods. http://stackoverflow.com/questions/13762228/confused-about-service-vs-factory

by kshep92

HTML

<div ng-controller=First>
    <input type=text ng-model=data.message />
    <span>{{data.message}}</span> <br />
    <span>{{data.object.name}} - {{data.object.age}}</span> <br />
    <ul>
        <li ng-repeat="name in data.names">{{name}}</li>
    </ul>
    <input type=button ng-click=setData("Hi!") value="Change Message" />
</div>

<div ng-controller=Second>
    <input type=text ng-model=data.message />
    <span>{{data.message}}</span>
</div>

JavaScript

var app = angular.module("myApp", []);

/* Use Factory for storing data that needs to be shared between
controllers such as strings and other objects. */
app.factory("Data", function() {

    return { message:"This is data", 
            object: { name:"Kevin", age:23 },
            names: ["Jan", "Jase"]};

});

/* Use Service for things like ajax requests and setting
values in other factory objects */
app.service("SetData", function(Data) {

this.setData = function(val) {
    //Changing a string
 Data.message = "New message " +val;
    //Changing an object;
    Data.object = {name:"John", age:25};
    //Changing an array
    Data.names = ["Sam", "Joe"];
};

});

function First($scope, Data, SetData) {
 $scope.data = Data;
    $scope.setData = function(val) { SetData.setData(val) };
}

function Second($scope, Data) {
 $scope.data = Data;
}