Use of ng-class with Chart.js
<p>I'm using the angular-charts module, which is based on Charts.js. It works pretty great, but now I'm trying to change my app in a way I can select many options from a combobox, so the chart gets recompiled and refreshed to the new type of chart I want.</p>

<p>I tried using ng-class for this purpose, but it somehow doesn't work (the chart just never gets compiled; the DOM element is there but you don't actually see anything). </p>

<p>This is my chart and my selector:</p>

<pre><code>&lt;div class="main-chart" ng-show="showChart" ng-cloak&gt;
    &lt;span class="label title"&gt;{{title}}&lt;/span&gt;
    &lt;canvas id="grafico" ng-class="chartclass"
    chart-data="data" chart-labels="labels"&gt;
    &lt;/canvas&gt;
    &lt;select name="typeSelector" id="chartType" class="form-control" ng-model="type" ng-change="changeChart()"&gt;
        &lt;option ng-selected="true" value="doughnut"&gt;Circle&lt;/option&gt;
        &lt;option value="bars"&gt;Bars&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>These are the parts involved from my controller, the two variables (one for the selector and one for the chart class), and the function that changes the class after a click is performed:</p>

<pre><code>$scope.type = "";
$scope.chartclass = "chart chart-doughnut";

$scope.changeChart = function(){

    $scope.chartclass = "chart chart-"+$scope.type;
}
</code></pre>

<p>The class name gets properly changed, but I just don't see anything. Maybe I have to call to a $compile function, use a custom directive with a link, or something? I'm pretty much new in Angular so I would love to see a good suggestion!</p>

<p>Thanks!</p>

<p><strong>EDIT:</strong> Let me repeat: the class name gets properly changed! The problem isn't about changing the class name, which works, the problem is with the actual chart showing off. It keeps hidden, like if it never was compiled.</p>

<p><strong>EDIT 2:</strong> Check it out in these images. First image shows the normal working with "class" attribute, second one shows what we're trying, which is selecting the class name dynamically (with ng-class). As I said, the DOM gets correctly changed, so the class name is ok! The problem is, that somehow it just doesn't show the chart:</p>

<p><a href="http://imgur.com/a/SJbzg" rel="nofollow">http://imgur.com/a/SJbzg</a></p>

<p><strong>EDIT 3:</strong> This is what I currently have:</p>

<p>Simple variable declaration on the controller, initialized for showing the Doughnut chart type:</p>

<pre><code>$scope.chartType = "Doughnut";
</code></pre>

<p>Here, the DOM:</p>

<pre><code>&lt;div class="main-chart" ng-show="showChart" ng-cloak&gt;
    &lt;span class="label title"&gt;{{title}}&lt;/span&gt;
&lt;canvas id="grafico" chart-type="chartType"
    chart-data="data" chart-labels="labels"&gt;
&lt;/canvas&gt;
    &lt;select name="typeSelector" id="typeOfChart" class="form-control" ng-model="chartType"&gt;
        &lt;option ng-selected="true" value="Doughnut"&gt;Circle&lt;/option&gt;
        &lt;option value="Bar"&gt;Bars&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>What am I doing wrong? Why the chart never gets rendered?</p>