AngularJS Live Example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=838"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<html ng-app="HelloApp">

  <body ng-controller="MyController">

    <fusioncharts id="mychartcontainer" chartid="mychart" width="{{width}}" height="400" type="{{type}}" dataSource="{{dataSource}}" config="{{chartoptions}}"></fusioncharts>
    <input type="button" ng-click="update()" value="Update Value" />


  </body>

</html>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
  $scope.type = "vbullet";
  $scope.width = 600;
  $scope.chartoptions = {
    "containerBackgroundColor": "#FF0000",
    "containerBackgroundOpacity": "0"
  };
  $scope.dataSource = {
    "chart": {
      "lowerLimit": "0",
      "upperLimit": "100",
      "numberPrefix": "$",
      "numberSuffix": "K",
      "plotFillColor": "#0075c2",
      "targetColor": "#8e0000",
      "showHoverEffect": "1",
      "showBorder": "0",
      "bgColor": "#ffffff",
      "showShadow": "0",
      "colorRangeFillMix": "{light}",
      "chartBottomMargin": "20"
    },
    "colorRange": {
      "color": [{
        "minValue": "0",
        "maxValue": "50",
        "code": "#e44a00",
        "alpha": "70"
      }, {
        "minValue": "50",
        "maxValue": "75",
        "code": "#f2c500",
        "alpha": "70"
      }, {
        "minValue": "75",
        "maxValue": "120",
        "code": "#1aaf5d",
        "alpha": "70"
      }]
    },
    "value": "82",
    "target": "90"
  };

  $scope.update = function() {
    $scope.dataSource.value = "56";
  };

});