javascript - How to change attribute on a selected directive from a controller -

i build application interactive svg map angular.js

whole app controlled controller, svg wrapped in directive, , every <path> in svg partial directive too.
when user clicked on wall, <path> id memorized in custom service , next when user select color, need fill wall color. problem can't access directive within controller. cant share scope directive because have multiple nested directives in controller , want access them id.

maybe there design mistake? how can achieve workflow?

there code controller, service , directives

colorpicker controller

app.controller("colorpicker", function($scope, $timeout, appconfig, colorservice) { $scope.colors = []; $scope.currentcolorset = 0; $scope.svgtemplateurl = appconfig.arsvg[$scope.$parent.roomtype.id][$scope.$parent.roomstyle.id] + 'over.svg'; $scope.maxcolorset = math.max.apply(math, jsondata.roomtype[$scope.$parent.roomtype.id].data.roomstyle[$scope.$parent.roomstyle.id].colors.map(function(color) {     return color.color.group; })); $scope.sliderconfig = {     min: 0,     max: $scope.maxcolorset,     step: 1      }  $scope.emptycolors = ( colorservice.getcolors().length === 0 ); $scope.currentprops = {};  $scope.applycolor = function(color) {     console.log($scope.currentprops);     //**here need set fill selected color selected directive** }  $scope.prevcolorset = function(){     if($scope.currentcolorset > 0) {         $scope.currentcolorset--;         generatecolorset($scope.currentcolorset);     }  }  $scope.nextcolorset = function(){     if($scope.currentcolorset < $scope.maxcolorset) {         $scope.currentcolorset++;         generatecolorset($scope.currentcolorset);     }  }  generatecolorset = function(setindex){     $scope.colors = [];     for(var = 0; < jsondata.roomtype[$scope.$parent.roomtype.id].data.roomstyle[$scope.$parent.roomstyle.id].colors.length; i++){         if(jsondata.roomtype[$scope.$parent.roomtype.id].data.roomstyle[$scope.$parent.roomstyle.id].colors[i].color.group == setindex) {             $scope.colors.push(jsondata.roomtype[$scope.$parent.roomtype.id].data.roomstyle[$scope.$parent.roomstyle.id].colors[i].color)         }     } } generatecolorset($scope.currentcolorset);  $scope.$watch("currentcolorset", function(newvalue, oldvalue) {     generatecolorset($scope.currentcolorset); });  }); 

directive whole svg

app.directive('svgmap', ['$compile', function ($compile) { return {     restrict: 'a',     link: function (scope, element, attrs) {         var svg = $(element).find('svg');         svg.removeattr('xmlns:a');         svg.attr('width', '869px');         svg.attr('height', '489px');         element.append(svg);          var regions = element[0].queryselectorall('path');         angular.foreach(regions, function (path, key) {             var regionelement = angular.element(path);             regionelement.attr("region", "");             $compile(regionelement)(scope);         });     }, } }]); 

directive region (wall)

app.directive('region', ['$compile','colorservice','$timeout', function ($compile, colorservice, $timeout) { return {     restrict: 'a',     link: function (scope, element, attrs) {         scope.properties = {             elementid : element.attr("id"),             stroke: '',             fill: '#fff'         };         scope.regionclick = function () {             scope.currentprops = scope.properties;             if(colorservice.selectedregion != scope.properties.elementid) {                 scope.properties.stroke = '#e5514e';                 colorservice.selectedregion = scope.properties.elementid;             } else {                 scope.properties.stroke = '';                 colorservice.selectedregion = '';              }             console.log('click: ' + scope.properties.elementid + ' : ' + scope.properties.stroke);         };         scope.setstroke = function () {             scope.stroke = '#e5514e';         };         scope.removestroke = function() {             if(colorservice.selectedregion != scope.properties.elementid) {                 scope.properties.stroke = '';             }             //console.log('enter: ' + scope.elementid + ' : ' + scope.stroke);          };         scope.removecolor = function() {             console.log('removed');             scope.properties.fill = '#fff';             colorservice.remove(scope.properties.elementid);         };         colorservice.getcolors().foreach(function(item) {             if(item.id === scope.properties.elementid) {                 scope.properties.fill = item.info.val;             }         });         element.attr("ng-click", "regionclick()");         element.attr("ng-attr-stroke", "{{properties.stroke}}");         element.attr("ng-attr-fill", "{{properties.fill}}");         element.attr("ng-mouseenter", "setstroke()");         element.attr("ng-mouseleave", "removestroke()");         element.attr("ng-right-click", "removecolor()");         element.after('<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />');         element.removeattr("region");         $compile(element)(scope);     } } }]);