infragistics - How to dynamically update Ignite UI igDataChart with AngularJS -

i need show ignite ui igdatachart , need open in new window. when new data comes service need update chart in open instances. can suggest method. here code. i'm using ngstorage save data in angular, need update object.

my index.html

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/ngstorage/0.3.6/ngstorage.min.js"></script>  <link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />  <!--css file specific chart styling --> <link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />  <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>  <!-- ignite ui required combined javascript files --> <script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.dv.js"></script>   <script src="scripts/app.js"></script> <script src="scripts/controllers/maincontroller.js"></script> <div ng-controller="maincontroller">     <div>         <div ng-click="openinnewwindow()"><img height="25" width="25" style="position:relative;margin:0 auto;clear:left;height:auto;z-index: 0; text-align:center" ; src="icons/new_window_icon.png" />open in new </div>         <table>             <tr>                 <td id="columnchart"></td>                 <td id="columnlegend" style="float: left"></td>             </tr>          </table>     </div>     <div style="width: 80%; min-width: 210px;">         <div id="chart"></div>     </div>      <div class="uscensus-attribution">         population data from:<br />         <a href="http://www.census.gov/" target="_blank">u.s. census bureau</a>     </div>   </div>     

and controller

   (function (app) {              app.controller("maincontroller", function ($scope, $localstorage, $interval) {                  $localstorage.data = [                         { "countryname": "china", "pop1995": 1216, "pop2005": 1297, "pop2015": 1361, "pop2025": 1394 },                         { "countryname": "india", "pop1995": 920, "pop2005": 1090, "pop2015": 1251, "pop2025": 1396 },                         { "countryname": "united states", "pop1995": 266, "pop2005": 295, "pop2015": 322, "pop2025": 351 },                         { "countryname": "indonesia", "pop1995": 197, "pop2005": 229, "pop2015": 256, "pop2025": 277 },                         { "countryname": "brazil", "pop1995": 161, "pop2005": 186, "pop2015": 204, "pop2025": 218 }                 ];                  $("#chart").igdatachart({                     width: "100%",                     height: "400px",                     title: "population per country",                     subtitle: "five largest projected populations 2015",                     datasource: $localstorage.data,                     axes: [                         {                             name: "nameaxis",                             type: "categoryx",                             title: "country",                             label: "countryname"                         },                         {                             name: "populationaxis",                             type: "numericy",                             minimumvalue: 0,                             title: "millions of people",                         }                     ],                     series: [                         {                             name: "2015population",                             type: "column",                             ishighlightingenabled: true,                             istransitioninenabled: true,                             xaxis: "nameaxis",                             yaxis: "populationaxis",                             valuememberpath: "pop2015"                         }                     ]                 });                  $scope.data = [                  { "subject": "physics", "july": 100 },                  { "subject": "maths", "july": 88 },                  { "subject": "english", "july": 96 },                  { "subject": "history", "july": 110 },                  { "subject": "geography", "july": 92 }                 ];                 $scope.datachart = $scope.data;                   $scope.$storage = $localstorage.$default({                     name: 'jack'                 });                  $scope.openinnewwindow = function () {      $window.open('/newwindow.html', "_blank",  "toolbar=yes,scrollbars=yes, resizable=yes, top=100, left=500, width=800, height=800");                 }                  $interval(function () {                      $localstorage.data = [                        { "countryname": "china", "pop1995": 500, "pop2005": 100, "pop2015": 2300, "pop2025": 130 },                        { "countryname": "india", "pop1995": 1920, "pop2005": 109, "pop2015": 125, "pop2025": 135 },                        { "countryname": "united states", "pop1995": 1266, "pop2005": 1295, "pop2015": 1322, "pop2025": 1351 },                        { "countryname": "indonesia", "pop1995": 1197, "pop2005": 1229, "pop2015": 1256, "pop2025": 1277 },                        { "countryname": "brazil", "pop1995": 1161, "pop2005": 1186, "pop2015": 1204, "pop2025": 1218 }                     ];                   }, 10000);               });          })(app); 

the igdatachart angularjs directive doesn't have automatic one-way data biding. should use igdatachart.notifyinsertitem, igdatachart.notifyremoveitem , igdatachart.datasource apis manually update each instance. in order see how use apis check binding real-time data sample.