title: Multiple Instances of AngularJS Directive with different data?
body: <p>I have a directive that basically generates a label tag for inputs.  It replaces the directive with my template as well as ensures the parent and next nodes have the correct attributes and classes I require.</p>
  
  <pre><code>.directive('placeHolder', function() {
      return {
      restrict: 'E',
      replace: true,
      template: '&lt;label for="{{input}}" class="placeholder-label"&gt;{{label}}&lt;/label&gt;',
  
      link: function ($scope, elem, attrs) {
        $scope.label = attrs.label;
        $scope.input = attrs.input;
        //check if the parent element is a div, then set the class to make it's position relative
        if(elem.parent().nodeName === 'DIV') {
          elem.parent().addClass('placeholder-parent');
        }
  
        //check if the next element is an input or textarea
        if(elem.next().nodeName === 'INPUT' || elem.next().nodeName === 'TEXTAREA') {
          //ensure the id of the input/textarea is the same as the for value in the label, else set it so
          if(elem.next().attr('id') === input) {
            return
          } else {
            elem.next().attr('id', input)
          }
        }
      }
    };
  
  });
  </code></pre>
  
  <p>My problem is that I have 2 inputs on the same page, thus two instances of the same directive, and both instances result in the same label visible.</p>
  
  <p>Here is a fiddle <a href="http://jsfiddle.net/HB7LU/11330/" rel="nofollow">http://jsfiddle.net/HB7LU/11330/</a>  </p>