title: Dynamically create view model for similar angular objects
body: <p>I am in a strange situation in which I need to create an on the fly view model for selected angular element.</p>
  
  <p>Consider I have three different directives in my html view called <code>&lt;paragragh&gt;</code> and they all are connected to a single controller, <code>ParagraphController</code>. Since I need to share a setting between them, I've defined a service to hold my shared variables named <code>ParagraphConfig</code> which is connected to a controller called <code>ParagraphConfigConroller</code>.</p>
  
  <p><code>paragraph.config.js</code></p>
  
  <pre><code>(function() {
  
    'use strict'
  
    angular
      .module('Application')
      .directive('ParagraphConfig', ParagraphConfigService);
  
    function ParagraphConfigService() {
      var paragraph = {
        text: 'blah blah',
        style: {
          fontWeight: 'normal',
          border: 0
        }
      }
  
      return {
        get: get
      }
  
      function get() {
        return paragraph;
      }
    }
  
  })();
  </code></pre>
  
  <p><code>config.controller.js</code> -> <code>controllerAs: ParagraphConfigViewModel</code></p>
  
  <pre><code>(function() {
  
    'use strict'
  
    angular
      .module('Application')
      .directive('ParagraphConfigController', ParagraphConfigController);
  
    function ParagraphConfigController( ParagraphConfig.get ) {
      var self = this;
      self.paragraph = ParagraphConfig.get();
    }
  
  })();
  </code></pre>
  
  <p><code>paragraph.directive.js</code></p>
  
  <pre><code>(function() {
  
    'use strict'
  
    angular
      .module('Application')
      .directive('paragraph', ParagraphDirective);
  
    function ParagraphDirective() {
      return {
        restrict: 'E',
        templateUrl: '/path/to/templates/paragraph.html',
        scope: true,
        replace: true,
        require: '^component',
        controller: 'ParagraphController',
        controllerAs: 'ParagraphViewModel'
      }
    }
  
  })();
  </code></pre>
  
  <p><code>paragraph.controller.js</code> -> <code>controllerAs: ParagraphViewModel</code></p>
  
  <pre><code>(function() {
  
    'use strict'
  
    angular
      .module('Application')
      .directive('ParagraphController', ParagraphController);
  
    function ParagraphController( ParagraphConfig.get ) {
      var self = this;
      self.paragraph = ParagraphConfig.get();
    }
  
  })();
  </code></pre>
  
  <p>Actually I'm using <code>ParagraphConfig</code> to share/change settings of each paragraph. Here is how I bind settings to the each <code>p</code> tag.</p>
  
  <p>I have a <code>paragraph.html</code> and a <code>config.html</code> as follow.</p>
  
  <p><code>paragraph.html</code></p>
  
  <pre><code>&lt;p ng-style="ParaghViewModel.paragraph.style"&gt;
    {{ParagraphViewModel.paragraph.text}}
  &lt;/p&gt;
  </code></pre>
  
  <p><code>config.html</code></p>
  
  <pre><code>&lt;input type="radio" name="font weight" 
  ng-model="ParagraphViewModel.fontWeight" value="bold"&gt; Bold
  
  &lt;input type="radio" name="font weight" 
  ng-model="ParagraphViewModel.fontWeight" value="normal"&gt; Normal    
  </code></pre>
  
  <p>Now the problem is, when I select a paragraph ( I have a setting pane which will be activated by clicking on each paragraph ) and try to change its setting, it affects other paragraphs.</p>
  
  <p>Is there any solution to create a unique view model by clicking on each paragraph?!</p>