Angular Chart.js not displaying Chart (Legend is Displaying) - angularjs

Question

I am using the Angular-chart.js package:
http://jtblin.github.io/angular-chart.js/
When I load the page, the legend at the bottom of the page shows, but the chart itself is not displayed.
I added divs to verify that the data is actually populated. Here is the code that I have so far:
<div>
<span>
vm.bvpsData -
</span>
{{vm.bvpsData | json}}
</div>
<div>
<span>
vm.bvpsLabels -
</span>{{vm.bvpsLabels | json}}
</div>
<div>
<span>
vm.bvpsSeries -
</span>{{vm.bvpsSeries | json}}
</div>
<canvas id="bvpsChart" class="chart chart-line" data-data="vm.bvpsData"
data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries">
</canvas>
When I run the page and look at the code, this is what is rendered in the html:
<div class="ng-binding"><span>vm.bvpsData -</span>[
[
"6.88",
"6.95",
"4.31",
"4.33",
"4.45",
"4.49",
"4.16",
"4.04",
"3.92",
"3.61",
"3.68",
"3.55",
"3.21",
"3.38",
"3.62",
"3.98",
"3.86",
"3.66",
"3.87",
"4.15",
"4.41",
"4.59",
"4.95",
"5.15",
"5.22",
"5.40",
"5.66",
"6.28",
"6.68",
"7.00",
"7.57",
"8.08",
"7.79",
"8.10",
"8.59",
"9.10",
"9.33",
"9.68",
"10.14",
"10.45",
"10.74",
"10.80",
"11.07",
"10.94"
]
]</div>
<div class="ng-binding"><span>vm.bvpsLabels -</span>[
"06/2004",
"09/2004",
"12/2004",
"03/2005",
"06/2005",
"09/2005",
"12/2005",
"03/2006",
"06/2006",
"09/2006",
"12/2006",
"03/2007",
"06/2007",
"09/2007",
"12/2007",
"03/2008",
"06/2008",
"09/2008",
"12/2008",
"03/2009",
"06/2009",
"09/2009",
"12/2009",
"03/2010",
"06/2010",
"09/2010",
"12/2010",
"03/2011",
"06/2011",
"09/2011",
"12/2011",
"03/2012",
"06/2012",
"09/2012",
"12/2012",
"03/2013",
"06/2013",
"09/2013",
"12/2013",
"03/2014",
"06/2014",
"09/2014",
"12/2014",
"03/2015"
]</div>
<div class="ng-binding"><span>vm.bvpsSeries -</span>[
"Book Value Per Share"
]</div>
<div class="chart-container">
<canvas id="bvpsChart" class="chart chart-line ng-isolate-scope" data-data="vm.bvpsData" data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries" width="929" height="0" style="width: 929px; height: 0px;"></canvas>
<chart-legend>
<ul class="line-legend">
<li><span style="background-color:rgba(151,187,205,1)"></span>Book Value Per Share</li>
</ul>
</chart-legend>
</div>
What am I doing wrong? Why is the chart not displaying?

Answer 1

I fixed the problem. I had the chart canvas in a div with an ng-show and kept it hidden until a stock was selected.
I changed it to an ng-if and everything worked perfect after that.