title: How can I pass variables from an isolated scope directive to a child?
body: <p>I have two isolated scope directives. Ideally I like both to work independently and not require any custom templates. The first directive is going to be page scroll watcher, when it hits a certain point I want it to trigger an update in the other directive. Is it possible for a child directive to watch a variable in the parent directive? </p>
  
  <p>I've created a simple plunkr to illustrate the issue, <a href="http://plnkr.co/edit/wwfBzmemyrj1r1R54riM?p=preview" rel="nofollow">http://plnkr.co/edit/wwfBzmemyrj1r1R54riM?p=preview</a></p>
  
  <pre><code>    /*
   &lt;div ng-outer&gt;Outer directive {{myvar}}
        &lt;div ng-inner="myvar"&gt;Inner directive&lt;/div&gt;
      &lt;/div&gt;
      */
  app.directive('ngOuter', [ '$timeout', function ($timeout) {
      var directive = {
          restrict: 'A'
          ,scope:{}
      }
      directive.link = function (scope, element, attrs) {
          $timeout(function(){
            scope.myvar = "test 001"
          },1000)
      }
      return directive;
  
  }]);
  
  app.directive('ngInner', [ function () {
      var directive = {
          restrict: 'A'
          ,scope:{ data: '=ngInner',  myvar: '=myvar' }
      }
      directive.link = function (scope, element, attrs) {
          scope.$watch('data', function(newVal, oldVal){
            if(newVal)
            element.text("new inner val", newVal);
          });
            scope.$watch('myvar', function(newVal, oldVal){
            if(newVal)
            element.text("new myvar", newVal);
          });
  
  
      }
  
      return directive;
  
  }]);
  </code></pre>