title: Directive template unique IDs for elements in AngularJS
body: <p>I have a directive that can be used multiple times on a page. In the template of this directive, I need to use IDs for an input-Element so I can "bind" a Label to it like so:</p>
  
  <pre><code>&lt;input type="checkbox" id="item1" /&gt;&lt;label for="item1"&gt;open&lt;/label&gt;
  </code></pre>
  
  <p>Now the problem is, as soon as my directive is included multiple times, the ID "item1" is not unique anymore and the label doesn't work correctly (it should check/uncheck the checkbox when clicked).</p>
  
  <p>How is this problem fixed? Is there a way to assign a "namespace" or "prefix" for the template (like asp.net does with the ctl00...-Prefix)? Or do I have to include an angular-Expression in each id-Attribute which consists of the directive-ID from the Scope + a static ID. Something like:</p>
  
  <pre><code>&lt;input type="checkbox" id="{{directiveID}} + 'item1'" /&gt;&lt;label for="{{directiveID}} + 'item1'"&gt;open&lt;/label&gt;
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>My Directive</p>
  
  <pre><code>module.directive('myDirective', function () {
      return {
          restrict: 'E',
          scope: true, 
          templateUrl: 'partials/_myDirective.html',
          controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
              ...
          } //controller
      };
  }]);
  </code></pre>
  
  <p>My HTML</p>
  
  <pre><code>&lt;div class="myDirective"&gt;
    &lt;input type="checkbox" id="item1" /&gt;&lt;label for="item1"&gt;open&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>