title: Passing params to nested directives with isolated scope
body: <p>I have an object <code>data</code> in the <code>MainCtrl</code>. This object is used to pass data to directives <code>first-directive</code> and <code>second-directive</code>. Two-data binding is neccesary in both cases.</p>
  
  <p>For <code>first-directive</code>, I pass the complete object <code>data</code> but for <code>second-directive</code> I want to pass <code>numbers</code> object (<code>scope.numbers = scope.dataFirst.numbers</code>).</p>
  
  <p><strong>The problem:</strong></p>
  
  <p>When I do <code>&lt;div second-directive="dataFirst.numbers"&gt;&lt;/div&gt;</code>, and I check if <code>dataSecond</code> is an object, it returns <code>true</code>.</p>
  
  <p>But when I do <code>&lt;div second-directive="numbers"&gt;&lt;/div&gt;</code> and I check if <code>dataSecond</code> is an object, it returns <code>false</code>.</p>
  
  <p>In both cases if I do <code>console.log(scope)</code> the <code>scope.dataSecond</code> property is shown.</p>
  
  <p><strong>The question:</strong></p>
  
  <p>Why does this occur and what's the correct way to pass params to directives?</p>
  
  <p><strong>EDIT:</strong>
  The idea is making reusable directives and this implies that they can't depend on others directives.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app',[])
  
  .controller('MainCtrl', function($scope) {
    $scope.data = {
      numbers: {
        n1: 'one',
        n2: 'two'
      },
      letters: {
        a: 'A',
        b: 'B'
      }
    }
  })
  
  .directive('firstDirective', function () {
    return {
      template: '&lt;div class="first-directive"&gt;\
        &lt;h2&gt;First Directive&lt;/h2&gt;\
        {{dataFirst}}\
        &lt;div second-directive="dataFirst.numbers"&gt;&lt;/div&gt;\
        &lt;div second-directive="numbers"&gt;&lt;/div&gt;\
        &lt;/div&gt;',
      replace: true,
      restrict: 'A',
      scope: {
        dataFirst: '=firstDirective'
      },
      link: function postLink(scope, element, attrs) {
        console.log('first directive')
        console.log(scope)
        scope.numbers = scope.dataFirst.numbers;
      }
    };
  })
  
  .directive('secondDirective', function () {
    return {
      template: '&lt;div class="second-directive"&gt;\
        &lt;h2&gt;Second Directive&lt;/h2&gt;\
        {{dataSecond}}\
        &lt;div class="is-obj"&gt;is an object: {{isObj}}&lt;/div&gt;\
        &lt;/div&gt;',
      replace: true,
      restrict: 'A',
      scope: {
        dataSecond: '=secondDirective'
      },
      link: function postLink(scope, element, attrs) {
        console.log('second directive');
        console.log(scope)
        
        // &lt;div second-directive="XXXX"&gt;&lt;/div&gt;
        // if 'numbers' returns undefined
        // if 'dataFirst.numbers' returns the object
        console.log(scope.dataSecond); 
        
        scope.isObj = false;
        
        if(angular.isObject(scope.dataSecond)){
          scope.isObj = true;
        }
      }
    };
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2 {
    padding: 0;
    margin: 0;
  }
  
  .first-directive {
    background: #98FFDA;
    color: black;
    padding: 10px;
  }
  
  .second-directive {
    background: #FFA763;
    color: white;
    padding: 10px;
  }
  
  .is-obj {
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
      &lt;h2&gt;MainCtrl&lt;/h2&gt;
      {{data}}
  
      &lt;div first-directive="data"&gt;
      &lt;/div&gt;
  
      &lt;div second-directive="data"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>