title: D3 - Adding div to svg is appended but not seen AnguarJs
body: <p>In the following program, I am adding a div to svg, by d3. It is appended properly as can be seen in the dom structure of chrome browser. But, I cannot see the background or its visibility in the webpage.</p>
  
  <p><strong>SNIPPET:</strong> </p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"&gt;&lt;/script&gt; 
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          svg{border:2px solid black;}
          .red{width:50px;height:50px;background:red;}
      &lt;/style&gt;
  
  &lt;/head&gt; 
  
  &lt;body ng-app="myApp" ng-controller="myCtrl"&gt; 
  
      &lt;svg&gt;&lt;/svg&gt;
  
      &lt;script&gt;
  
          //module declaration 
          var app = angular.module('myApp',[]);
  
          //Controller declaration
          app.controller('myCtrl',function($scope){
  
              $scope.svgWidth = 500;//svg Width
              $scope.svgHeight = 300;//svg Height 
  
              //resetting svg height and width in current svg 
              d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight);
  
              //Setting up of our svg with proper calculations 
              var svg = d3.select("svg");
  
              //for x axis 
              svg.append("div").attr("class", "red");
  
          });
  
      &lt;/script&gt; 
  
  &lt;/body&gt; 
  
  &lt;/html&gt; 
  </code></pre>
  
  <p><strong>RESULT:</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/duWPb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/duWPb.png" alt="enter image description here"></a></p>
  
  <p><strong>DOM:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/j1QFM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j1QFM.png" alt="enter image description here"></a></p>
  
  <p><strong>NOTE:</strong></p>
  
  <blockquote>
    <p>My div is appended already. Its case of visibility only. So its different from ---> <a href="https://stackoverflow.com/questions/17595813/is-it-possible-to-append-a-div-inside-svg-element">is it possible to append a div inside svg element</a></p>
  </blockquote>