title: Multiple controller instances in angular.js, javascript
body: <p>I have a view that consists of the two same parts, only the content is different. So, basically I want to somehow use one controller and one view for both left and right parts.<br>
  What I do (in html):   </p>
  
  <pre><code>&lt;div class="board_body"&gt;
      &lt;div class="left_board" ng-controller="leftBoardController"&gt;
          &lt;div ng-controller="panelController" ng-include="template"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right_board" ng-controller="rightBoardController"&gt;
          &lt;div ng-controller="panelController" ng-include="template"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I keep all initialization logic in left and right controllers and use panelController and it's view for left and right parts. In this case panelController can be shared because it uses common $scope variables that have different values (vars are created in the left and right controllers so they are visible to the panelCotrl).  </p>
  
  <pre><code>angular.module("radar.leftController", [])
  .controller("leftController", function ($scope, ...) { 
      $scope.data = getSomeData();
  }
  
  angular.module("radar.rightController", [])
  .controller("rightController", function ($scope, ...) { 
      $scope.data = getOtherData();
  }
  
  angular.module("radar.panelController", [])
  .controller("panelController", function ($scope, ...) { 
      $scope.template = "somePath/panelView.html";
      // shared logic for left and right contrls goes here
  }
  </code></pre>
  
  <p>In the panelView.html: </p>
  
  <pre><code>&lt;div&gt;data: {{data.length}}&lt;/div&gt;
  </code></pre>
  
  <p>Seems that from the right I can change both left and right vars, but from the left I can only change the left vars (as expected). (I need left and right parts be completely separated).</p>
  
  <p>So, what is a proper way of reusing one controller (creating multiple instances)?</p>