angularjs - show dygraph in list items -

can body tell me how display dygraph in listview using json response. here response need make dygraph..i goggled did'nt clue it.

http://piratepad.net/ep/pad/view/ro.y8pksmhlihk/latest

this how doing :-

in index.html :-

<script src="lib/ionic/js/ionic.bundle.js"></script>  <!-- cordova script (this 404 during development) --> <script src="cordova.js"></script> <script src="js/dygraph-combined-dev.js"></script> <script src="js/dygraph-combined.js"></script>  <!-- app's js --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> 

in home.html :-

<div ng-repeat="entry in listnew">     <div class="bar bar-dark bar-head">         <h2>basestation {{entry.baseid}} {{entry.nickname}}</h2>     </div>      <ion-list>     <div ng-repeat="scout in entry.scouts">         <div class="wrap_home">             <ion-item class="item-accordion" ng-click="togglegroup(scout)"                 ng-class="{active: isgroupshown(scout)}" ng-init="showgraph(scout.temphistory)">             <div class="row">                 <div class="col col-25">                     <div class="top_spc">                         <b>{{scout.moduleid}}</b>                     </div>                 </div>                 <div class="col col-25">                     <div class="top_spc">{{scout.nickname}}</div>                 </div>                 <div class="col col-20">                     <div class="top_spc temp_mid">                         {{scout.temperature}}<sup>o</sup>c                     </div>                 </div>                 <div class="col">                     <div class="batt_icon ">                         <img src="img/battery.png" alt="battery" />                     </div>                 </div>                 <div class="col">                     <div ng-if="scout.power=='0'">                         <div class="plug_icon red">                             <img src="img/plug.png" alt="plug" />                         </div>                     </div>                     <div ng-if="scout.power=='1'">                         <div class="plug_icon">                             <img src="img/plug.png" alt="plug" />                         </div>                     </div>                 </div>             </div>             </ion-item>             <ion-item class="item-accordion sm-item"                 ng-show="isgroupshown(scout)">             <div class="sub_detail">                  <div class="row">                     <div class="col col-50">                         <b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}                             min ago)</span>                     </div>                     <div class="col col-50">{{scout.templow}}(l),                         {{scout.temphigh}}(a), {{scout.tempavrg}} (avg)</div>                 </div>                 <div id=graph>                 </div>                 </div>             </ion-item>         </div>     </div>     </ion-list> </div> 

in controller.js :-

$scope.showgraph = function(data) {                              g = new dygraph(document.getelementbyid("graph"),                     // possible data formats, see http://dygraphs.com/data.html                     // x-values dates, e.g. "2012/03/15"                     data, {                             // options go here. see http://dygraphs.com/options.html                         legend : 'always',                         animatedzooms : true,                         title : 'dygraphs chart template'                     });                          }; 

here data displayed in pirate-pad.
problem getting dygraph @ first item not on remaining.

here go :-

in controller.js define :-

$scope.graphs = [  							{  								data : data(place javascript array here),  							},    					];    				})    .directive(  				'graph',  				function() {  					return {  						restrict : 'e',  						scope : {  							data : '=',  							opts : '='  						},  						template : '<div class="graph"></div><div class="labels"></div>',  						link : function(scope, elem, attrs) {  							var graph = new dygraph(elem.children()[0],  									scope.data, scope.opts);  						}  					};  				});

in home.html define :-

<ion-list>  	<div ng-repeat="scout in entry.scouts" >  		<div class="wrap_home">  			<ion-item class="item-accordion" ng-click="togglegroup(scout,scout.temphistory)"  				ng-class="{active: isgroupshown(scout)}" >  			<div class="row">  				<div class="col col-25">  					<div class="top_spc">  						<b>{{scout.moduleid}}</b>  					</div>  				</div>  				<div class="col col-25">  					<div class="top_spc">{{scout.nickname}}</div>  				</div>  				<div class="col col-20">  					<div class="top_spc temp_mid">  						{{scout.temperature}}<sup>o</sup>c  					</div>  				</div>  				<div class="col">  					<div class="batt_icon ">  						<img src="img/battery.png" alt="battery" />  					</div>  				</div>  				<div class="col">  					<div ng-if="scout.power=='0'">  						<div class="plug_icon red">  							<img src="img/plug.png" alt="plug" />  						</div>  					</div>  					<div ng-if="scout.power=='1'">  						<div class="plug_icon">  							<img src="img/plug.png" alt="plug" />  						</div>  					</div>  				</div>  			</div>  			</ion-item>  			<ion-item class="item-accordion sm-item"  				ng-show="isgroupshown(scout)">  			<div class="sub_detail">  			  				<div class="row">  					<div class="col col-50">  						<b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}}  							min ago)</span>  					</div>  					<div class="col col-50">{{scout.templow}}(l),  						{{scout.temphigh}}(a), {{scout.tempavrg}} (avg)</div>  				</div>  				<div  >          <graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph>  </div>  				</div>  			</ion-item>  		</div>  	</div>  	</ion-list>

dygraph have problem ng-repeat read in link given bellow :-

dygraphs not working ng-repeat