title: Creating angularjs directive with id attribute for internal html but id still on outer html
body: <p>So I have created this checkbox directive that is made up of a label and input element.
  I want to set an id attribute on the directive and set this as the "id" of the input element and the label "for" attribute. This works fine, but the problem is that it remains on the outer html which is a div, so it breaks my directive. I thought that if you had the directive set to replace : true, then this would remove the html that defined the directive . </p>
  
  <p>The directive is as follows </p>
  
  <pre><code>angular.module('journal.directives', []).
    directive('fancyCheckbox', function(){
    return {
      restrict : 'EA', 
      replace : true,
      template : '&lt;div class="fancyCheckbox"&gt;' +
             '&lt;input type="checkbox" id="{{ id }}" /&gt;' +
             '&lt;label for="{{ id }}" &gt;&lt;/label&gt;' +
             '&lt;/div&gt;',
      scope : {
        colour : '@',
        id : '@', 
      },
      link : function(scope, elem, attrs){
        var spotColourClass;
        var valid_colours = ['blue', 'green', 'gray', 'purple', 
                'blue', 'orange', 'charcoal', 'light',
                    'yellow', 'red'];
  
        if(valid_colours.indexOf(scope.colour) !== -1){                   
        spotColourClass = scope.colour + "spot";
        }else{
          spotColourClass = 'greenspot';
        }
  
      elem.addClass(spotColourClass);
      }
    };
  });
  </code></pre>
  
  <p>When I call my directive as </p>
  
  <pre><code>&lt;fancy-checkbox colour="red" id="mycheckbox"&gt;&lt;/fancy-checkbox&gt;
  </code></pre>
  
  <p>and it becomes </p>
  
  <pre><code>&lt;div class="fancyCheckbox ng-isolate-scope greenspot" colour="green" id="mycheckbox"&gt;
    &lt;input type="checkbox" id="mycheckbox"&gt;
    &lt;label for="mycheckbox"&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You see that the "id" is still on the outer div, which is not what I want. I assumed that this would be removed. So do I just have to remove it manually in the linking function</p>
  
  <p>Hope someone can help</p>
  
  <p>Thanks</p>