title: PrimeNg dropdown in multiple p-tree nodes: Differentiating selected options
body: <p>I have a PrimeNg p-tree</p>
  <pre><code>    &lt;p-tree [value]=&quot;treeNodes&quot; selectionMode=&quot;single&quot; [(selection)]=&quot;selectedNode&quot;&gt;&lt;/p-tree&gt;
  </code></pre>
  <p>TreeNodes are expressed with ng-templates, one of the templates being as follows.</p>
  <pre><code>    &lt;ng-template let-node pTemplate=&quot;stagebased&quot; &gt;
          &lt;input [(ngModel)]=&quot;node.label&quot; type=&quot;text&quot;  &gt;
          &lt;p-dropdown [options]=&quot;stages&quot;  [(ngModel)]=&quot;stage&quot;  optionLabel=&quot;name&quot;&gt;&lt;/p-dropdown&gt;
     &lt;/ng-template&gt;
  </code></pre>
  <p>There is a menu on the left which has a menu item with this command -</p>
  <pre><code>command: (event) =&gt; { this.addElement(&quot;&lt;Node Label&gt;&quot;, &quot;stagebased&quot;) }
  </code></pre>
  <p>So you click a menu item and that calls addElement(label: string, type: string), which adds another TreeNode as a child of the root node.  addElement is follows:</p>
  <pre><code>addElement(label: string, type: string) {
      var node =
      {
        label: label,
        type: type
      };
      this.selectedNode = this.treeNodes[0];
      this.selectedNode.children.push(node);
    }
  </code></pre>
  <p>All good so far -- you can click addElement multiple times to add multiple treeNodes containing input fields and dropdowns with the same select options available.</p>
  <p><a href="https://i.stack.imgur.com/6PJg8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6PJg8.png" alt="enter image description here" /></a></p>
  <p>The problem is if I select an option in one dropdown - the other dropdown applies the same option selected. I cannot select a different option for one dropdown instance as opposed to another.</p>
  <p>How do I express the ngModel on p-dropdown in a way that allows for multiple selected 'stage' items?</p>
  <p>Thanks</p>