title: updating high chart on real time in angular js after a particular time
body: <p>I want to update high chart on real time in angular js after a particular time span and it should get reflects on html without user interaction in angular JS.
  Below are code for Controller,Directive and HTML. I am using rest web service to fetch the data from back end.
  Controller :</p>
  
  <pre><code>function dashboardController($scope, $http) {
      this.$scope = $scope;
  
          $scope.init=function(){
              _refreshPageData();
              function _refreshPageData() {
                  $http({
                      method : 'GET',
                      url : 'http://localhost:8080/SpringWebApp/rest/employee/monthlydata'
                  }).then(function successCallback(response) {
                      $scope.data = response.data;
                      var data = $scope.data;
                      var a = [];
                      parseInt($scope.data[0].data);
                      angular.forEach(data, function(data, key) {
                            a.push(parseInt(data.data));
                          });
                      console.log($scope.data);
                      $scope.chartConfig = {
                              xAxis: {
                                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                                               'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                              },
                                          title: {
                                  text: 'USD to EUR exchange rate from 2006 through 2008'
                              },            subtitle: {
                                  text: document.ontouchstart === undefined ?
                                      'Click and drag in the plot area to zoom in' :
                                      'Pinch the chart to zoom in'
                              },
                              yAxis: { title: { text: 'Temperature (Celsius)' } },
                              tooltip: { valueSuffix: ' celsius' },
                              legend: { align: 'center', verticalAlign: 'bottom', borderWidth: 0 },
                                 plotOptions: {
                                  area: {
                                      fillColor: {
                                          linearGradient: { x1: 200, y1: 220, x2: 220, y2: 2221},
                                          stops: [
                                              [0, Highcharts.getOptions().colors[0]],
                                              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                          ]
                                      },
                                      marker: {
                                          radius: 2
                                      },
                                      lineWidth: 1,
                                      states: {
                                          hover: {
                                              lineWidth: 1
                                          }
                                      },
                                      threshold: null
                                  }
                              },
                              series: [{
                                type:'area',
                                data :a
                              }]
                      };
                  }, function errorCallback(response) {
                      console.log(response.statusText);
                  });
              }
          }
  
  
  }
  
  Directive :
  
  var chartDirective = function () {
      return {
          restrict: 'E',
          replace: true,
          template: '&lt;div&gt;&lt;/div&gt;',
          scope: {
              config: '='
          },
          link: function (scope, element, attrs) {
              var chart;
              var process = function () {
                  var defaultOptions = {
                      chart: { renderTo: element[0] },
                  };
                  var config = angular.extend(defaultOptions, scope.config);
                  chart = new Highcharts.Chart(config);
              };
              process();
              scope.$watch("config.series", function (loading) {
                  process();
              });
              scope.$watch("config.loading", function (loading) {
                  if (!chart) {
                      return;
                  }
                  if (loading) {
                      chart.showLoading();
                  } else {
                      chart.hideLoading();
                  }
              });
          }
      };
  };
  
  Html :
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@*" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"&gt;&lt;/script&gt;
      &lt;script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="highcharts@*" data-semver="2.3.5" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js"&gt;&lt;/script&gt;
      &lt;script src="chartDirective.js"&gt;&lt;/script&gt;
      &lt;script src="dashboardController.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;meta charset="utf-8"&gt; 
    &lt;/head&gt;
  
    &lt;body ng-app="app"&gt;
      &lt;div ng-controller="dashboardController"&gt;
      &lt;div ng-init="init()"&gt;&lt;/div&gt;
        &lt;chart config="chartConfig"&gt;&lt;/chart&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>