Same data in multiple views using AngularJS

Services are singletons, so when the service is injected the first time, the code in the factory gets called once. I'm assuming you have a routing table, since you are talking about multiple pages.

If you define this

angular.module('services', []).factory('aService', function() {  var shinyNewServiceInstance;  //factory function body that constructs shinyNewServiceInstance  shinyNewServiceInstance = shinyNewServiceInstance || {foo:1};  return shinyNewServiceInstance;});

Dependency inject it into your controllers (simplified):

controller('ACtrl', ['aService', function(aService) {  aService.foo += 1;}]);controller('BCtrl', ['aService', function(aService) {  aService.foo += 1;}]);

If you examine aService.foo each time you navigate between ACtrl & BCtrl, you will see that the value has been incremented. The logical reason is that the same shinyNewServiceInstance is in your hand, so you can set some properties in the hash from the first page & use it in the second page.

Since you are new to angularjs an easier approach would be to use $rootScope to share data between your controllers (and the views associated with them).

Here is an example:

angular.module('MyApp', []).config(['$routeProvider', function ($routeProvider) {  $routeProvider    .when('/', {      templateUrl: '/views/main.html',      controller: 'MainCtrl'    })    .when('/first-page', {      templateUrl: '/views/first.html',      controller: 'FirstCtrl'    })    .when('/second-page', {      templateUrl: '/views/second.html',      controller: 'SecondCtrl'    });}]).controller('MainCtrl', ['$rootScope', function ($rootScope) {  // Will be available everywhere in your app  $rootScope.users = [    { name: 'Foo' },    { name: 'Bar' }  ];}]).controller('FirstCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) {  // Only available inside first.html  $scope.bazUser = { name: 'Baz' };  // Add to global  $rootScope.users.push($scope.bazUser);}]).controller('SecondCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) {  console.log($rootScope.users); // [{ name: 'Foo' }, { name: 'Bar' }, { name: 'Baz' }];}]);

inside second.html for example

<ul>  <li ng-repeat="user in users">{{user.name}}</li></ul>