title: Nesting directives within directives
body: <p>Regarding AngularJS directives I've ran into a situation where I'm calling a directive from within another directive and I have the following questions.</p>
  
  <ol>
  <li>Why can't I referecne scope.bindValue in my link function? Is there a way I can compute a value from scope.bindValue and set it to scope?</li>
  <li>Why can the subdirective bind using "@" in scope:{} but not use scope.value = attrs.value in the link function?</li>
  </ol>
  
  <p>All of the below can be seen at <a href="http://jsfiddle.net/sdg9/AjDtt/13/">http://jsfiddle.net/sdg9/AjDtt/13/</a> </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;directive bind-value="12" value="7"&gt;&lt;/directive&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  var commonTemplate = '&lt;div&gt;{{name}} bind-value is: {{bindValue}} &lt;/div&gt;&lt;div&gt;{{name}} value is: {{value}} &lt;/div&gt;&lt;div&gt;{{name}} add one to bind-value is: {{addOneBindValue}} &lt;/div&gt;&lt;div&gt;{{name}} add one to value is: {{addOneValue}} &lt;/div&gt;&lt;br/&gt;';
  
  myApp.directive('directive', function () {
      return {
          scope: {
              bindValue: "@",
          },
          template: commonTemplate + '&lt;br/&gt;&lt;sub-directive bind-value="{{value}}" value="{{value}}"&gt;&lt;/sub-directive&gt;',
          restrict: 'E',
          link: function (scope, element, attrs) {
              scope.name = "Directive";
              scope.value = attrs.value;
              scope.addOneBindValue = parseInt(scope.bindValue) + 1;
              scope.addOneValue = parseInt(scope.value) + 1;
          }
      };
  });
  
  
  myApp.directive('subDirective', function () {
      return {
          scope: {
              bindValue: "@"
          },
          template: commonTemplate,
          restrict: 'E',
          link: function (scope, element, attrs) {   
              scope.name = "SubDirective";
              scope.value = attrs.value;
              scope.addOneBindValue = parseInt(scope.bindValue) + 1;
              scope.addOneValue = parseInt(scope.value) + 1;
          }
      };
  });
  </code></pre>
  
  <p>Output:</p>
  
  <pre><code>Directive bind-value is: 12
  Directive value is: 7
  Directive add one to bind-value is: null    &lt;--- why?
  Directive add one to value is: 8    
  
  SubDirective bind-value is: 7
  SubDirective value is:                      &lt;--- why?
  SubDirective add one to bind-value is: null
  SubDirective add one to value is: null  
  </code></pre>