Chart.js isn't being updated once an update call is made - asp.net

Question

I have a small angular app that makes an api call based on a month/year from a drop down list in asp. It is meant for that api call to be made whenever year or month drop down lists are changed.
The first/original load works just fine. According to the debugger on any change I'm hitting the api on the change, and getting a return. The entire "card-widget"/ChartController div is disappearing (even with css properties commented out).
My ASP code:
<div id="card">
<div>
</div>
<div id="card-widget" ng-app="ChartApp" ng-controller="ChartController" style="width:350px; height: 350px;">
<div>
<asp:DropDownList ID="lstMonth" runat="server" ng-model="month" ng-change="updateChart()"></asp:DropDownList>
<asp:DropDownList ID="lstYear" runat="server" ng-model="year" ng-change="updateChart()"></asp:DropDownList>
</div>
<div>
<canvas id="Chart" height="350" width="350"></canvas>
</div>
</div>
<div id="card-widget-fail" style="width: 350px; height: 100px;">
<label>No chart</label>
</div>
</div>
My Angular code:
var app = angular.module("ChartApp", []);
app.controller('ChartController', function ($scope, $http) {
$scope.updateChart = function () { getChart() };
var dataChart = document.getElementById("Chart").getContext('2d');
var year = document.getElementById("<%=lstYear.ClientID %>");
var month = document.getElementById("<%=lstMonth.ClientID %>");
getChart();
function getChart() {
//api call to load chart data based off month.options[year.selectedIndex].text & year.options[year.selectedIndex].text
}
});

Answer 1

The reason getChart() is not being called is because it's not present on the $scope element. Use $scope.getChart = function() { ... } instead. I recommend reading this documentation page, specifically the part "Scope as Data-Model".