angularjs - Directive with isolated scope and added properties, not available to inner directives -

i'd have directive isolated scope, , set properties scope within directive. create environment variables, displayed other directives inside it, so:

html:

<div environment>          <!-- directive set properties scope creates-->   {{ env.value }}                  <!-- available -->   <div display1 data="env"></div>  <!-- displayed other directives (graphs, -->   <div display2 data="env"></div>  <!-- charts...) --> </div> 

js:

angular.module("test", [])   .directive("environment", function() {     return {       restrict: 'a',       scope: {},       link: function(scope) {         scope.env = {           value: "property set inside directive"         };       }     };   })   .directive("display1", function() {     return  {       restrict: 'a',       require: '^environment'       scope: {         data: '='       },       link: function(scope, elt, attr, envcontroller) {          scope.$watch('data', function(oldv, newv) {           console.log("display data");         });        }     };   })   .directive("display2", function() {     return {/* ... */};   }); 

but doesn't work. here a plunker. if remove isolation, works ok though. do wrong ? problem of transclusion ? seems work if use template in 'environment' directive, not want.

thanks help.

edit: see same problem answered here. proposed solution use controller instead of directive. reason wanted use directive possibility use 'require' in inner directives, thing can't done ngcontroller think.

by introducing external templates, managed find working solution problem. i'm quite way have set has worked @ point can't when. last time built directive not reliant on external markup file, don't know.

in case, following should work, if willing introduce separate templates directives:

app.directive('environment', function () {     return {         restrict: 'a',         templateurl: 'env.html',         replace: true,         scope: {},         link: function (scope, el, attrs) {             scope.env = {               value: "property set inside directive"             };         }     }; });  app.directive('display1', function () {     return {         restrict: 'a',         scope: {             data: '='         },         templateurl: 'display1.html',         replace: false,         link: function(scope) {             // console.log(scope.data);         }     }; }); 

and markup (these wouldn't sit in <script> tags realistically, more have external template taken fiddle set up).

<script type="text/ng-template" id="display1.html">     <span>display1 is: {{data}}</span> </script>  <script type="text/ng-template" id="env.html">     <div>         <h1>env.value is: {{env.value}}</h1>         <span display1 data="env.value"></span>             </div> </script>  <div>     <div environment></div> </div> 

fiddle link: http://jsfiddle.net/adukg/5421/

edit: after reading not want use templates (should've done first..), here's solution working. unfortunately, 1 can go (aside few others, link coming below) , in opinion not looking one...

app.directive('environment', function () {     return {         restrict: 'a',         template: function (element, attrs) {           return element.html();         },         scope: {},         link: function (scope, el, attrs) {           scope.env = {             value: "property set inside directive"           };         }     }; }); 

and markup:

<div environment> {{env.value}} </div> 

fiddle: http://jsfiddle.net/7k6kk/1/

say it, trick.

here's thread off of angular github repo, outlining issue , why not 'supported'.