title: AngularJS reusing the same controller on one page, with different configuration
body: <p>I want to display two elements on a page controlled by <strong>different instances of the same controller</strong>, <em>but</em> I need to register some external information that will be unique (one "joystick" gets an identifying property set, like "player = one" while the other gets "player = two").I'm not sure of the best way of pulling this off exactly</p>
  
  <p>Here's a generic example of what I'm trying to accomplish:</p>
  
  <pre><code>&lt;!-- These need to have different configurations --&gt;
  &lt;div ng-include src="'joystick/joy.tpl.html'" 
       ng-controller="JoystickCtrl"&gt;...&lt;/div&gt;
  
  &lt;div ng-include src="'joystick/joy.tpl.html'" 
       ng-controller="JoystickCtrl"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>Should I:</p>
  
  <p><strong>Use a directive?</strong></p>
  
  <pre><code>&lt;div ng-include src="'joystick/joy.tpl.html'" 
       ng-controller="JoystickCtrl" player="one"&gt;...&lt;/div&gt;
  &lt;div ng-include src="'joystick/joy.tpl.html'" 
       ng-controller="JoystickCtrl" player="two"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p><strong>Use $injector?</strong> (fyi - this might be an incorrect implementation)</p>
  
  <pre><code>&lt;div ng-controller="DualJoyCtrl"&gt;
      &lt;div ng-include src="'joystick/joy.tpl.html'" 
           ng-controller="joyOne" player="one"&gt;...&lt;/div&gt;
      &lt;div ng-include src="'joystick/joy.tpl.html'" 
           ng-controller="joyTwo" player="two"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  
  -----
  
  .controller('DualJoyCtrl', function ($injector, JoystickCtrl, $scope, $rootScope) {
     $scope.joyOne = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"one"});
     $scope.joyTwo = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"two"});
  });
  </code></pre>
  
  <p><strong>Or... not do this?</strong></p>
  
  <p>I realize this is similar to another, seemingly inconclusive stack post:</p>