AngularJS : share common factory to create a new object

Question

My application has two execution paths.

Root
 |
 |---Tool1 --> T1Page 1
 |         --> T1Page 2
 |
 |---Tool2 --> T2Page 1
 |         --> T2Page 2
 |
 |----Factory (F)

Here T1Page2 and and T2Page2 are having similar UI elements and I have defined a factory for that. Now the problem is, if user first start Tool1 and then navigate to Tool2, in T2Page2 it displays the values selected in T1Page2 . This is obviously because of the singleton injection in the controller. How can i make sure that Angular returns a new factory object when user comes to T2Page2.

One solution I can think of is to add a clean up method in the factory and call it whenever user starts the T2Page2. But that doesnt sounds good to me.

Factory

(function () {
var serviceId = 'setUp';
angular.module('app').factory(serviceId , ['common', 'datacontext']);
function setUp(common,datacontext){
var vm = this;
vm.name='';
vm.address='';
return init();

 function init() {
      return vm;
  }
}
}());

T1Page2 Controller 1

(function () {    
    var controllerId = 'T1Page2';
    angular.module('app').controller(controllerId, ['common', 'datacontext', 'setUp', T1Page2]);

function T1Page2(common, datacontext, setup) {
   //code omitted
  }
}());

T2Page2 Controller 2

(function () {    
    var controllerId = 'T2Page2';
    angular.module('app').controller(controllerId, ['common', 'datacontext', 'setUp', T2Page2]);

function T2Page2(common, datacontext, setup) {
   //need a new setUp object here. 
   // rest of the code omitted
  }
}());

Answer 1

I'd say there are two possible solutions to your question.

Solution 1

Use an Angular Service rather than a Factory. While a factory maintains a persistent state (it is new'ed when the module is loaded), a service returns a constructor function for you to new as many times as you'd like (you can create a new service for each Tool).

Sample Service:

angular.module('app').service('MyService',
  function () {
    this.name = '';
    this.address = '';
  }
]);

Utilizing a Service within a controller (for example)

$scope.myService = new MyService();

Solution 2

Create 2 factories. One factory for Tool1 and another for Tool2.

Solution 2 might be easier in your case since you want a service (used in the general sense here) to be used by one group of pages, while a second group of pages needs a different persistent state object.