d3.js - Show specifig D3 data in ng-repeat, AngularJS and directives -

i followed example d3integration, way use proper d3 custom visualization inside angular me in openmuc framework.

i have several devices id. managed data separated bars, updated independetly. surely want show 1 bar specific device, controller holds complete data.

is possible show specific bar (either through index, or filter)? ng-model worked index :x. setting index on data="d3data[deviceindex]" throws error. interestingly, bar of deviceindex disappeared, (due error), other worked fine.

this:

<div class="row">     <div class="col-md-6 col-md-offset-3" ng-controller="democtrl">         <span>{{title}}</span>         <d3-bars data="d3data" label="name" on-click="d3onclick(item)"></d3-bars>                                                <br><input type="text" ng-model="d3data[deviceindex].value"></input>         </div> </div> 

i pretty sure manageable directive function definition or similar, not manage :(

is wrapped in ng-repeat scanning devices:

<div ng-repeat="(deviceindex,device) in checkeddevices track $index" ng-switch on= "device.id | limitto : 3"> 

my directive looks (little modified d3integration example):

(function () {    'use strict';      angular.module('myappdirective')      .directive('d3bars', ['d3', function(d3) {        return {          restrict: 'ea',		          scope: {            data: "=",                label: "@",             onclick: "&",   		  onload: "&"  //can define this?          },          link: function(scope, ielement, iattrs) {            var svg = d3.select(ielement[0])                .append("svg")                .attr("width", "100%");              // on window resize, re-render d3 canvas            window.onresize = function() {              return scope.$apply();            };            scope.$watch(function(){                return angular.element(window)[0].innerwidth;              }, function(){                return scope.render(scope.data);              }            );  		    		            // watch data changes , re-render            scope.$watch('data', function(newvals, oldvals) {              return scope.render(newvals);            }, true);  		    		  //here catch broadcast democtrl. in obj data (d3data) inside.  		   scope.$on('onrerender', function(event, obj) {  			  //todo: solve dependend on index?!   			   return scope.data = obj;  //triggers $watch  			})  		    		                    // define render function            scope.render = function(data){              // remove previous items before render              svg.selectall("*").remove();                // setup variables              var width, height, max;              width = d3.select(ielement[0])[0][0].offsetwidth - 10;                // 20 margins , can changed              height = scope.data.length * 35;                // 35 = 30(bar height) + 5(margin between bars)              max = 250;                // can found dynamically when data not static                // max = math.max.apply(math, _.map(data, ((val)-> val.count)))                // set height based on calculations above              svg.attr('height', height);                //create rectangles bar chart              svg.selectall("rect")                .data(data)                .enter()                  .append("rect")                  .on("click", function(d, i){  					return scope.onclick({item: d});   // how worked before  				})  				.on("load", function(d,i){  					return scope.onload({item: d, index: i});  				})                  .attr("height", 30) // height of each bar                  .attr("width", 0) // initial width of 0 transition                  .attr("x", 10) // half of 20 side margin specified above                  .attr("y", function(d, i){                    return * 35;                  }) // height + margin between bars                  .transition()                   // .duration(1000) // time of duration                    .duration(0) // time of duration                    .attr("width", function(d){                      return d.value*2/(max/width);                    }); // width based on scale                svg.selectall("text")                .data(data)                .enter()                  .append("text")                  .attr("fill", "#555")                  .attr("y", function(d, i){return * 35 + 22;})                  .attr("x", 15)                  .text(function(d){return d[scope.label];});              };  		    		    		  scope.getdata = function(indexofhtml){  			  return scope.data[indexofhtml];  		  };  		            }        };      }]);    }());

(function () {    'use strict';      angular.module('myappcontrollers')      .controller('democtrl', ['$scope', function($scope){        $scope.title = "democtrl";        $scope.d3data = [];        $scope.d3onclick = function(item){          console.log(item.name);        };  	    	  //tried here  	  $scope.d3onload = function(item, index){          console.log(item.name + " | " + index.i);         };  	  	    	  console.log("create initial data:" );	    		for(var = 1; <= 4; i++){  			if(i < 10){  				$scope.d3data.push({name: "voltagel1_0x00" + + "0", value:i});  			}else{  				$scope.d3data.push({name: "voltagel1_0x0" + + "0", value:i});  			}				  		}  	    	$scope.$on('onsearch', function(event, obj) {  		  	  	for(var len = $scope.d3data.length, i=0; i<len; ++i){  			if(obj[0].name == $scope.d3data[i].name){  				$scope.d3data[i] = obj[0];  			}   		};  	  $scope.$broadcast('onrerender', $scope.d3data);      });        }]);    }());

my problem displayed in picture: super appriciated!