Pie chart with data [] dont show any message - angularjs

Question

Hi everyone I have a pie chart made with nvd3 and when graph.data=[] it doenst show anything.. I want to display a simple message like "No data to show"
View:
<tab ng-if="dataConsNetfilter" heading="Summary" disable="!tabClick" active="true">
<p>{{dataConsNetfilter}}</p>
<div class="no-data" ng-if="dataConsNetfilter.data.length==0">
<img src="/assets/img/nodata.png"/>
<h3>No Data</h3>
</div>
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataConsNetfilter.types" resize>
<img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="graph.options && graph.data.length>0">
<center><nvd3 options='graph.options' data="graph.data"></nvd3></center>
<br>
</div>
</div>
</tab>
Logs from view:
{"types":[{"type":"netfilter.nfacct_bytes","options":{"chart":{"type":"pieChart","height":500,"width":1000,"margin":{"top":20,"right":20,"bottom":50,"left":55},"noData":"No data to show in the specified range","legend":{"rightAlign":false},"showValues":true,"legendPosition":"right","labelType":"percent","donut":true,"donutRatio":0.35,"duration":500,"xAxis":{"axisLabel":""},"yAxis":{"axisLabel":"Total","axisLabelDistance":-10}}},"data":[]}]}
Options:
var options = {
chart: {
type: 'pieChart',
height: 500,
width:1000,
margin : {
top: 20,
right: 20,
bottom: 50,
left: 55
},
noData: 'No data to show in the specified range',
legend: {
rightAlign:false,
},
valueFormat: function(d) {
return d.value;
},
x: function(d){return d.label;},
y: function(d){return d.value;},
showValues: true, //Display pie labels
legendPosition: 'right',
labelType: 'percent', //Configure what type of data to show in the label. Can be "key", "value" or "percent"
donut: true, //Turn on Donut mode. Makes pie chart look tasty!
donutRatio: 0.35, //Configure how big you want the donut hole size to be.
duration: 500,
xAxis: {
axisLabel: ''
},
yAxis: {
axisLabel: 'Total',
axisLabelDistance: -10
}
}
}
My tab is all blank and i want to show a message to inform the user... how to do this?

Answer 1

My solution was "ng-if="dataConsNetfilter.types[0].data.length==0"
<tab ng-if="dataConsNetfilter" heading="Summary" disable="!tabClick" active="true">
<p>{{dataConsNetfilter}}</p>
<div class="no-data" ng-if="dataConsNetfilter.types[0].data.length==0">
<img src="/assets/img/nodata.png"/>
<h3>No Data</h3>
</div>
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataConsNetfilter.types" resize>
<img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="graph.options && graph.data.length>0">
<center><nvd3 options='graph.options' data="graph.data"></nvd3></center>
<br>
</div>
</div>
</tab>