title: Why are tables not working right in these AngularJS directives?
body: <p>I have the following AngularJS template file:</p>
  
  <pre><code>&lt;div ng-controller="PredictionCtrl as predictionCtrl"&gt;
    &lt;table width="40%" border="1"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td bgcolor="orange"&gt;A&lt;/td&gt;
          &lt;td bgcolor="yellow"&gt;B&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;td bgcolor="pink"&gt;C&lt;/td&gt;
          &lt;td bgcolor="cyan"&gt;D&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
    &lt;br&gt;
  
    &lt;table width="40%" border="1"&gt;
      &lt;tbody&gt;
        &lt;rpt-my-directive-a p="1" q="2"&gt;&lt;/rpt-my-directive-a&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;rpt-my-directive-b r="3" s="4"&gt;&lt;/rpt-my-directive-a&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the template for my directive <code>myDirectiveA</code>, I have the following:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td bgcolor="orange"&gt;E&lt;/td&gt;
    &lt;td bgcolor="yellow"&gt;F&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>In the template for my directive <code>myDirectiveB</code>, I have the following:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td bgcolor="pink"&gt;G&lt;/td&gt;
    &lt;td bgcolor="cyan"&gt;H&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The output looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/3dpO8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3dpO8.png" alt="enter image description here"></a></p>
  
  <p>I was expecting two identical-looking tables. Instead I got one with the proper colors and one without. Why did the table that was constructed using AngularJS directives come out looking different than the plain-HTML one?? How do I fix this? I want the second table to look just like the first.</p>
  
  <p><strong>EDIT #1:</strong></p>
  
  <p>When I took Sergey's advice below, the declaration for <code>myDirectiveA</code> now looks like this:</p>
  
  <pre><code>myApp.directive('myDirectiveA',function(){
      return {
        restrict:'A',
        replace: true,
        scope: {
          p: '=',
          q: '='
        },
        controller: 'MyDirectiveACtrl',
        controllerAs: 'MyDirectiveACtrl',
        bindToController: true,
        template: '&lt;div ng-include="MyDirectiveACtrl.myDirectiveAHTML"&gt;&lt;/div&gt;'
      };
    }
  );
  </code></pre>
  
  <p>and the output now looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/lTAf9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lTAf9.png" alt="enter image description here"></a></p>