<body ng-app="myApp">
  <div ng-controller="MainController">
    <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="500px"></div>
      <div id="controls">
        <section>
          <label>Add random values : </label><button ng-click="addValues()"> append </button>
        </section>
        <section>
          <label>Title Text : </label><input type="text" ng-model="myJson.title.text"/>
        </section>

  </div>
  </div>

</body>
*{
  box-sizing: border-box;
  font-family : "verdana"
}
html,body{
  margin: 0px;
}

#controls{
  height: 68px;
  width: 700px;
  background-color : #5F7E87;
  color : white;
  padding: 10px;
}
var app = angular.module('myApp', ['zingchart-angularjs']);

app.controller('MainController', function($scope) {

    $scope.myJson = {
      type : "bar",
      title:{
        backgroundColor : "transparent",
        fontColor :"black",
        text : "Hello world"
      },
      backgroundColor : "white",
      series : [
        {
          values : [1,2,3,4],
          backgroundColor : "#4DC0CF"
        }
      ]
    };
  
  $scope.addValues = function(){
    var val = Math.floor((Math.random() * 10));
    console.log(val);
    $scope.myJson.series[0].values.push(val);
  }
  
});

External CSS

  1. https://codepen.io/zingchart/pen/epvRNK.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-2.1.4.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-angularjs-1.0.4.js