Services in angularJS a small example. - angularjs

Question

I am going through a series o documentation to understand services and factories.
Came across this working code.
var app = angular.module('plunker', []);
app.value('cnt', 7);
app.service('foo', function(cnt) {
this.cnt = ++cnt;
this.inc = function(quan) {
this.cnt += quan;
};
});
app.controller('MainCtrl', function($scope, cnt, foo) {
$scope.cnt = cnt;
$scope.foo = foo;
$scope.inc = function() {
$scope.foo.inc(1); // why $scope used here
};
});
app.controller('TangentCtrl', function($scope, foo) {
$scope.jump = function() {
foo.inc(5); // Why $scope not used here and why it doesnot work when I add scope
};
});
In TangentCtrl controller $scope.jump function its not using $scope to access foo.inc as you can see in the code I have commented.
I think there is some concept here that I dont understand , can anyone enlighten me to this.

Answer 1

var app = angular.module("myApp",[]);
function constructorFunction() {
this.getData = function() {
//bussiness logic
};
}
/*
* your are registering service called myService
* service/factory uses singleton design pattern
* i.e. you have an object called myService in app
*/
app.service('myService', constructorFunction);
/*
* Here, you are passing sevice name (myService) and
* constructor Function (constructorFunction) to service
* provider
* which creates singleton object (myService)
*/
/*
* angular uses injector to resolve dependencies
* your are actully tells injector to
* add these dependencies to your controller function
*/
app.controller('myCtrl',function($scope, myService){
/*
* Here, you get $scope and myService
* $scope and myService these are two different objects.
* It is not yet compulsory to inject $scope if you
* use controllerAs syntax, good practice
*/
//view specific logic
});
/*
* Note: array syntax is useful in case of minification
* ['$scope', 'foo', function($scope, foo){}]
* angular maps minified variables with strings provided
* to resolve dependencies.
*/

Answer 2

That is because you have injected foo while declaring the controller
app.controller('TangentCtrl', function($scope, foo) {...}
In the controller function, you get instance of the foo service.
Ideally you should write the controller as below. So when you get instance of the service within controller itself, why you need $scope to access the inc function?
app.controller('TangentCtrl', ['$scope', 'foo', function($scope, foo) {
....
}]);

Answer 3

Look this code
app.service('foo', function(cnt) {
this.cnt = ++cnt;
this.inc = function(quan) {
this.cnt += quan;
};
});
Image you have a class 'foo', in this class 'inc' is a function, you are exporting 'foo' as a service, in the above 'foo' can be used as a connection between two controllers to pass some data between them.
So you are just Injecting foo in 'TangentCtrl' via this line
app.controller('TangentCtrl', function($scope, foo) { ...... });
So since you can use 'foo' without $scope in front them, so foo.inc(5); will call the method inc inside foo service and thus foo can be called by other controllers to get the value.