title: AngularJS - Create a directive that adds a sibling element
body: <p>I'm creating a <code>my-validate</code> directive that looks something like this</p>
  
  <pre><code>&lt;input my-validate="customValidation" ng-model="model" /&gt;
  </code></pre>
  
  <p>What I want to do is to attach a sybling element to the directive like this</p>
  
  <p>Error template:</p>
  
  <pre><code>&lt;ul class"errors"&gt;
     &lt;li ng-repeat="for error in errors"&gt;{{error}} not valid&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p><code>errors</code> is defined in the scope of the directive.</p>
  
  <p>I've added the error template in the <code>compile</code> function, but the problem I have is that the <code>scope</code> in the link function is not the same as the attached template.</p>
  
  <p>Here is a plunker to illustrate the issue: <a href="http://plnkr.co/edit/ghdtdYruQaaO0Yxxlrt1?p=preview" rel="nofollow">http://plnkr.co/edit/ghdtdYruQaaO0Yxxlrt1?p=preview</a></p>
  
  <p>'world' is seen in the directive template, but not on the added element :S.</p>