Using ng-show/ng-hide with google charts - angularjs

Question

Heyo, I am trying to make a div containing a google chart slide up and down when clicked. I can get the actual divs containing the chart to animate, but the chart itself won't respond. I have a suspicion it is because there is so much html that gets injected by the google charts object, but I'm not sure how to fix it. Apologies ahead of time if the question is poorly formatted, this is my first foray into Stack Overflow. Here is what my code looks like, the Google chart is getting injected into the elevation-chart div:
HTML:
<div class="leftContent" ng-controller="ElevationProfileController as Elevation" >
<div class="chart-slide" ng-click="Elevation.slide()" ng-show="Elevation.show">
<div id="elevation-chart" ng-show="Elevation.show" ></div>
</div>
JS:
angular.module('appName').controller('ElevationProfileController', function(){
this.show = true;
this.slide = function(){
this.show = !this.show;
}
})
CSS:
.chart-slide.ng-hide-add,
.chart-slide.ng-hide-remove {
display:block!important;
}
.chart-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-up;
animation:0.5s slide-up;
transition: .3s linear all;
height: 15%;
}
.chart-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-down;
animation:0.5s slide-down;
transition: .3s linear all;
height: 5%;
}
.chart-slide{
height: 15%;
width: 100%;
border: 5px solid black;
}
.chart-slide.ng-hide {
height:5%;
display:block!important;
}
#elevation-chart {
width: 90%;
height: 100%;
border: 2px solid orange;
}
#elevation-chart.ng-hide-add,
#elevation-chart.ng-hide-remove {
display:block!important;
}
#elevation-chart.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-up;
animation:0.5s slide-up;
transition: .3s linear all;
height: 100%;
}
#elevation-chart.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-down;
animation:0.5s slide-down;
transition: .3s linear all;
height: 0%;
}

Answer 1

I am not sure how this behaves in this case, but i am sure that you need use $scope.
You have to inject a scope in controller and you will can manage your view.
angular.module('appName').controller('ElevationProfileController', function($scope){
$scope.show = true;
$scope.slide = function(){
$scope.show = false;
}
})
Check the documentation here