title: Using Angular ng-class with d3.js on svg element
body: <p>Trying to use <a href="https://docs.angularjs.org/api/ng/directive/ngClass" rel="nofollow noreferrer">angular ng-class</a> with <a href="https://d3js.org/" rel="nofollow noreferrer">d3js</a> library on an <a href="https://developer.mozilla.org/it/docs/SVG" rel="nofollow noreferrer">svg</a> element, without luck. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
  
    &lt;div id="svgContainer"&gt;&lt;/div&gt;
    &lt;button id="swicthBtn" ng-click="switchStatus();" class="btn"&gt;Switch status&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>*, *:before, *:after {
    bounding-box: border-box;
  }
  
  #svgContainer {
    width: 400px;
    height: 400px;
    background-color: #333;
  }
  
  .btn {
    margin: 1em;
    padding: 1em;
  }
  
  .active {
    fill: red;
  }
  
  .inactive {
    fill: #666;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var app = angular.module("myApp", []);
  
  app.controller("MainCtrl", ["$scope", function($scope) {
  
      $scope.status = true;
    $scope.switchStatus = function() {
      $scope.status = !$scope.status;
    }
  
    var svg = d3.select("#svgContainer").append("svg")
      .attr("width", 400)
      .attr("height", 400);
  
    var rect = svg.append("rect")
      .attr("x", 150)
      .attr("y", 150)
      .attr("width", 100)
      .attr("height", 100)
      .attr("ng-class", "status ? 'active' : 'inactive'");
  
  }]);
  </code></pre>
  
  <p>This is the <a href="https://jsfiddle.net/revy/q1v8Le0r/1/" rel="nofollow noreferrer">jsfiddle</a>.
  There 2 css classes, active and inactive, which I would like to assign to the svg rect dynamically based on the value of the $scope.status variable. Actually it doesn't work. I tried some variations on the ng-class expression like:</p>
  
  <pre><code>"{status ? 'active' : 'inactive'}" 
  </code></pre>
  
  <p>or</p>
  
  <pre><code>"{'status' ? 'active' : 'inactive'}" 
  </code></pre>
  
  <p>but none worked.</p>
  
  <p>Is the ng-class directive unsupported on svg elements or am I doing something wrong?</p>