<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="//cdn.zingchart.com/zingchart.min.js"></script>
    <script src="zingchart-angularjs.js"></script>
    <style>
      html, body {
        margin:0;
      }
      header {
        width:100%;
        height:55px;
      }
      header a {
        display:inline-block;
        padding:10px;
        text-decoration:none;
        background-color:#2196f3;
        color:#FFF;
      }
      header a:hover {
        background-color:#64b5f6;
      }
      .view-contents {
        background-color:#f7f7f7;
        padding:10px;
      }
      .graph-contents {
        background-color:#fff;
      }
    </style>
</head>
<body ng-app="myApp">
  <header>
    <a href="#/">Home</a>
    <a href="#view1">View 1</a>
    <a href="#view2">View 2</a>
  </header>
  <h1>This content is static</h1>
  <div class="view-contents" ng-view></div>
  
  <script src="MainController.js"></script>
</body>
</html>
<div ng-controller="MainController">
    <h3>View 1 Content</h3>
    <div zingchart zc-json="myJson" zc-values="aValues" zc-width="99%" zc-height="300px" id="chart-1"></div>
</div>
(function(){
    'use strict';
    angular.module('zingchart-angularjs', [] )
    .directive('zingchart', [function(){
        var currentAutoId = 1;

        return {
            restrict : 'EA',
            scope : {
                id : '@',
                zcValues : '=',
                zcJson : '=',
                zcRender : '='
            },
            controller : ['$scope', '$element', '$attrs', function($scope, $element, $attrs){
                var id;
                // Get or generate id
                if(!$attrs.id){
                    id = 'zingchart-auto-' + currentAutoId;
                    currentAutoId++;
                    $attrs.id = id;
                    // newly generated id has to be put back on the element too to meet
                    // zingcharts requirements
                    $element.attr('id', id);
                }
                else{
                    if($attrs.id.indexOf('{{') > -1){
                        id=$scope.id;
                        $element.attr('id', id);
                    }
                    else{
                        id = $attrs.id;
                    }
                }

                var initializing = {
                    json : true,
                    values :true
                };
                $scope.$watchCollection('zcValues', function(){
                    if(initializing.values){
                        initializing.values = !initializing.values;
                        return;
                    }
                    if($scope.zcValues){
                        if(isMultiArray($scope.zcValues)){
                            zingchart.exec(id, 'setseriesvalues', {
                                values : $scope.zcValues
                            });
                        }
                        else{
                            zingchart.exec(id, 'setseriesvalues', {
                                values : [$scope.zcValues]
                            });
                        }
                    }
                });

                $scope.$watch('zcJson', function(){
                    if(initializing.json){
                        initializing.json = !initializing.json;
                        return;
                    }
                    if($attrs.zcJson){
                        var _json = $scope.zcJson;

                        //Inject values
                        if($scope.zcValues){
			                injectValues($scope.zcValues, _json);
                        }
                        //Inject type
                        if(JSON.stringify(_json).indexOf('type') === -1){
                            _json.type = 'line';
                        }
                        else{
                            _json.type = ($attrs.zcType) ? $attrs.zcType : _json.type
                        }
                        zingchart.exec(id, 'setdata', {
                            data : _json
                        });
                    }
                },true);

                $scope.$on('$destroy', function() {
                    zingchart.exec($scope.id,'destroy');
                });
            }],
            link : function($scope, $element, $attrs){
                var id = $element.attr('id');

                //Defaults
                var _json = {
                    data : {
                        type : 'line',
                        series : []
                    },
                    width : 600,
                    height: 400
                };

                //Add render object.
                if($scope.zcRender){
                    mergeObject($scope.zcRender, _json);
                }

                //Add JSON object
                if($scope.zcJson){
                    mergeObject($scope.zcJson, _json.data);
                }

                //Add Values
                if($scope.zcValues){
                	injectValues($scope.zcValues, _json.data);
                }

                //Add other properties
                _json.data.type = ($attrs.zcType) ? $attrs.zcType : _json.data.type;
                _json.height = ($attrs.zcHeight) ? $attrs.zcHeight : _json.height;
                _json.width = ($attrs.zcWidth) ? $attrs.zcWidth : _json.width;
                _json.id = id;

                //Set the box-model of the container element if the height or width are defined as 100%.
                if(_json.width === "100%" && !$element.css('width')){
                    $element.css('width', '100%');
                }
                if(_json.height === "100%" && !$element.css('height')){
                    $element.css('height', '100%');
                }

                zingchart.render(_json);
            }
        };
    }]);

	/**
	* Injects values into each series, and handles multi series cases.
	* @param the values to inject into the config object
	* @param the configuration object itself.
	*/
	function injectValues(values, config) {
		if(typeof config.series === 'undefined'){
			config.series = [];
		}
		//Single Series
		if(!isMultiArray(values)){
			if(config.series[0]){
				config.series[0].values = values;
			}
			else{
				config.series.push({'values' : values});
			}
		}
		//Multi Series
		else{
			for(var i = 0; i < values.length; i++){
				if(config.series[i]){
					config.series[i].values = values[i];
				}
				else{
					config.series.push({'values' : values[i]});
				}
			}
		}
		return config;
	}

    /**
    *   Helper function to merge an object into another, overwriting properties.
    *   A shallow, not a recursive merge
    *   @param {object} fromObj - The object that has properties to be merged
    *   @param {object} intoObj - The object being merged into (Result)
    */
    function mergeObject(fromObj, intoObj){
        for(var property in fromObj){
            if (fromObj.hasOwnProperty(property)) {
                intoObj[property] = fromObj[property];
            }
        }
    }

    /**
    *   Determines whether an array is multidimensional or not.
    *   @param {array} _array - The array to test
    *   @returns {boolean} - true if the array is multidimensional, false otherwise
    */
    function isMultiArray(_array){
		return Array.isArray(_array[0]);
    }

})();
<div ng-controller="MainController">
   <h3>View 2 Content</h3>
   <p> We are executing a ZingChart API call to show 
   that the chart data doesn't persist:</p>
   <p class="graph-contents" ng-init="getChartInfo()">{{graphContent}}</p>
</div>
    // initialize application
    var app = angular.module("myApp", ['ngRoute', 'zingchart-angularjs']);

    // define controller
    app.controller('MainController', function($scope, $timeout) {
        $scope.graphContent = '';
        $scope.aValues = [[1,2,3,4,5],[1,2,3,4,5]];
        $scope.myJson = {
            type : "bar",
            title:{
                backgroundColor : "transparent",
                fontColor :"black",
                text : "Hello world"
            },
            series : [
                {
                    backgroundColor : '#00baf2'
                },
                {
                    backgroundColor : '#4caf4f'
                }
            ]
        };
        
        // Will use this to show that the chart still persists in the application
        // Even though the view does not
        $scope.getChartInfo = function() {
          var returnContent = zingchart.exec('chart-1','getdata');
          if (!returnContent)
            $scope.graphContent = 'Contents Undefined'
          else
            $scope.graphContent = JSON.stringify(returnContent);
        }
    });

    // define routes
    app.config(function($routeProvider) {
        $routeProvider
                .when('/view1', {
                    templateUrl : 'view1.html'
                })
                .when('/view2', {
                    templateUrl : 'view2.html'
                })
                .otherwise({
                    template : '<h3>Nothing Exists In This View</h3>'
                });
    });