javascript - How do I connect between parent $scope, directive $scope and a modal $scope? -

i'm trying create directive label selector.

<label-selector label="label1">label1</label-selector> 

label1 default label should selected, value comes $scope in controller view label-selector present.

the behaviour want follows, when user clicks label1 modal should open. modal lists collection of labels, (the collection should loaded array somhere). label1 in collection should marked selected, e.g. class="selected".

when click label say, label2, label2 should selected , modal should closed. event update label-selector.

<label-selector label="label2">label2</label-selector> 

i encapsulate both label-selector element , modal in same directive.

is possible?

update

i'v done small example here.

html

 <div ng-app="app" id="app">     <div ng-controller="mainctrl">         <label-select color="{{color}}"></label-select>     </div> </div> 

css

.flyout {     position: absolute;     top: 0px;     right: 0px;     z-index: 31101;     background-color: lightgray;     bottom: 0px;     box-shadow: -4px 0 4px rgba(0, 0, 0, 0.2);     overflow-y: auto;     width: 500px;     -webkit-transform: translate(100%, 0%);         -webkit-transition: 0.2s ease-in-out; } .flyout.show{     -webkit-transform: translate(0%, 0%);     } 

js

var app = angular.module('app', []);  app.controller('mainctrl', function ($scope) {     $scope.color = "#cecece"; });  app.directive('labelselect', function ($parse, $location) {     return {         restrict: 'e',         scope: {             color: '@color'         },         template:         '<a ng-click="selectcolor()" style="color: {{color}}" class="label-color icon-bookmark">{{color}}</a><div class="flyout"></div>',         link: function (scope, lelement, attrs) {             scope.selectcolor = function () {                 angular.element(".flyout").addclass("show");             };                      }     } }); 

http://jsfiddle.net/frejnorling/bnumc/4/

the behaviour try create want flyout div filled list (ul list) of labels, , when select 1 label in list the $scope.color in mainctrl should updated , flyout should disapear/close.

like said in comment can access variables parent scope in modal popups scope.

html

<div ng-app="app" id="app">     <div ng-controller="mainctrl">         <label-select color="{{color}}"></label-select>         <div class="flyout">             <ul>                 <li ng-click="setcolor(color)" ng-repeat="color in colors">{{color}}</li>             </ul>         </div>     </div> </div> 

js

var app = angular.module('app', []);  app.controller('mainctrl', function ($scope) {     $scope.color = "#aaaddd";     $scope.colors = ["#aaa", "#bbb", "#ccc", "#ddd", "#eee"];     $scope.setcolor = function (color) {         angular.element(".flyout").removeclass("show");         $scope.color = color;     }  });  app.directive('labelselect', function ($parse, $location) {     return {         restrict: 'e',         scope: {             color: '@color'         },         template:             '<a ng-click="selectcolor()" ng-showstyle="color: {{color}}" class="label-color icon-bookmark">{{color}}</a>',         link: function (scope, lelement, attrs) {             scope.selectcolor = function () {                 angular.element(".flyout").addclass("show");             };         }     } }); 

jsfiddle demo