How to destroy Charts in chartJS - angularjs

Question

I have an angular + Ionic app in which I am using chartJS to show some data. Now charts are implemented on a slider.
Link1 Link2 and there are similar linked issues.
The solution that I came across. from many of the post is that I would have to destroy the existing chart and recreate in my window. Because whenever I change options via a drop drow the view blows up, all slides instead of coming next to each other laterally, Start showing up vertically and when I change the device mode. It actually re renders the page and I can view it normally.
I have tried it using ng-if also but it doesn't work. So how do I destroy a chart in my angular App and then recreate it
Some HTML code as to how am I doing it.
<div ng-if="metricArray">
<ion-slide-box on-slide-changed="slideHasChanged($index)" style="height:50%">
<ion-slide ng-repeat="metric in metricArray">
<div style="text-align:center; margin-top:10px; color:#eee;">
{{metric.startDate}} {{metric.endDate}}
</div>
<canvas id="myCanvas" tc-chartjs-bar chart-options="options" chart-data="metric.data" auto-legend></canvas>
<div class="row" style="margin-top:30px;">
<div style="width:33%; text-align:center">
<h6 style="color:#eee">MAX</h6>
<div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
<h6 style="color:#eee">{{metric.max}}</h6>
<p style="color:#eee">{{metricUnit}}</p>
</div>
</div>
<div style="width:33%; text-align:center">
<h6 style="color:#eee">MIN</h6>
<div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
<h6 style="color:#eee">{{metric.min}}</h6>
<p style="color:#eee">{{metricUnit}}</p>
</div>
</div>
<div style="width:33%; text-align:center">
<h6 style="color:#eee">AVG</h6>
<div class="circleBase type1 " style="padding:15px; margin-left: auto; margin-right: auto;">
<h6 style="color:#eee">{{metric.avg}}</h6>
<p style="color:#eee">{{metricUnit}}</p>
</div>
</div>
</div>
</ion-slide>
</ion-slide-box>
</div>