var app = angular.module('sampleApp', []);
app.factory('Service', function() {
var Service = {
foo: 'Shared service'
};
return Service;
});
app.controller('Ctrl1', function($scope, Service) {
$scope.foo = Service.foo;
Service.foo = 'I am from contoller 1';
});
app.controller('Ctrl2', function($scope, Service) {
$scope.foo = Service.foo;
});
<div ng-app="sampleApp">
<div ng-controller="Ctrl1">Controller 1: {{foo}}</div>
<div ng-controller="Ctrl2">Controller 2: {{foo}}</div>
</div>
External resources loaded into this fiddle: