Dynamic Google chart depends on AngularJS $scope value

Question

I am new to AngularJS and Google chart.I have created one Google chart using data from AngularJS. It is working fine,now I need to make that chart as dynamic as per my Angular #scope value.

I have one filter button if I click that, it will change my Angular Scope values depends that i Need to change my Chart.My code is given below

<div id="side_pane" class="side">
  <label>GENDER</label></br>
  <label><input type="radio" ng-model='gender' ng-value='"M"' name="gender">MALE</label></br>
  <label><input type="radio" ng-model='gender' ng-value='"F"' name="gender">FEMALE</label><br/></br>
  <div>     
    <button ng-click="getFilterData(gender)">FILTER</button>
  </div> //Filter Button
</div>
<div id="fc">
  <div ng-view id="calender_chart_id" style="width:100%; height: 200px; margin-left:100px;"></div> 
</div>

<script type="text/javascript" src="public/modules/AreaChart.js"></script> //Google chart call

If you are not familiar with Google chart just consider as a normal JS file Thank You

Answer 1

As you probably know Angular has twoway databinding which watches the dom / models and updates your each accordingly. A "basic" script just run and is essentially done afterwards so changing scope will not make your chart change. You might be able to use the Chart object in a controller to rerender the object. Yet in my exprience this yields some unelegant code.

But you are in luck. Since there is a really nice angular-google-chart library. Which allows you to use the angular databinding to dynamically update charts. It also allows you to injects chart in the dom using a directive.

angular-google-charts library