title: How to initiate AngularJs directive when its name is set with ng-class
body: <p>I have few AngularJS directives to show Highstock graphs(myGraphEff,myGraphEnergy,..).</p>
  
  <p>Now I need to display these graphs with a sidebar displaying the names of each graphs with "li" elements and while clicking them I load corresponding graph.</p>
  
  <p>Here's my controller.</p>
  
  <pre><code>var app = angular.module('app', []); 
  app.controller('myController', function($scope,$http) {
  
      $scope.showingGraphs= [{name:"My Graph Eff",dir:"my-graph-eff"},{name:"My Graph Energy",dir:"my-graph-energy"}];
  
      $scope.displaingGraph= $scope.showingGraphs[0].dir;
  
      $scope.loadData = function(graphType){
  
          $scope.displaingGraph= graphType;
          $http.get('/reports/get-graph-data',{params:{"chartType": graphType}})
          .then(function(response) {
               $scope.data = response.data;
          }); 
      }
  
  });
  </code></pre>
  
  <p>Here's my HTML code</p>
  
  <pre><code>&lt;div class="box-content"&gt;
          &lt;div class="span8"&gt;
              &lt;div ng-class="displaingGraph" items="data" style="height: 296px;"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="sparkLineStats span4 widget green" onTablet="span5" onDesktop="span4" &gt;
  
              &lt;ul  class="unstyled onhover" &gt;
                  &lt;li ng-repeat="graph in showingGraphs" ng-click="loadData(graph.dir);"&gt;{{ graph .Name }}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My directive structure goes like this</p>
  
  <pre><code>app.directive('myGraphEff', function () {
    return {
      restrict: 'C',
      replace: true,
      scope: {
        items: '='
      },
      controller: function ($scope, $element, $attrs) {
  
      },
      template: '&lt;div id="container" style="margin: 0 auto"&gt;not working&lt;/div&gt;',
      link: function (scope, element, attrs) {
        var chart = new Highcharts.stockChart({
          chart: {
            renderTo: 'container',
            type: 'area'
          },
          title: {
            text: 'my graph eff'
          }
  
        });
        scope.$watch("items", function (newValue) {
          chart.series[0].setData(newValue, true);
        }, true);
  
      }
    }
  });
  </code></pre>
  
  <p>Now the problem is if I load the directive with,</p>
  
  <pre><code>&lt;div class="my-graph-eff" items="data" style="height: 296px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The graph loads successfully.<br/>But if I load it with ng-class the content of the directive does not load.</p>
  
  <pre><code>&lt;div ng-class="displaingGraph" items="data" style="height: 296px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But when I check the rendered HTML on browser I can see following,</p>
  
  <pre><code>&lt;div ng-class="displaingGraph" items="data" style="height: 296px;" class="my-graph-eff"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Using ng-class to change the directive is not working.<br/>
  Simply what I am trying to achieve is, change the graph when user click it's name.
  What would be the reason for this and how can I fix this ?</p>