title: AngularJS Directive: Pass dynamically created object as attribute for nested directive
body: <p>I have a directive that wraps around another directive . The child directive accepts an "options" object as an attribute. I want to create this options object in the parent directive's link function and then set it as an attribute on the child directive in the parent's template, but the options object does not get set if its created dynamically. This works if the options object is set statically in the template itself.</p>
  
  <p>I have a plunker here: <a href="http://plnkr.co/edit/gNeKMcneO8RDBmlmpt72?p=preview" rel="nofollow">http://plnkr.co/edit/gNeKMcneO8RDBmlmpt72?p=preview</a>
  Any pointers would be greatly appreciated!!</p>
  
  <pre><code>angular.module('nestedDirectives', [])
  .directive('fruitinfo',
      [
          function() {
              return {
                  restrict: 'A',
                  scope: {
                      fruitname: '@?'
                  },
                  template: '&lt;br&gt;Fruit Name: {{fruitname}}&lt;br&gt;Fruit Options: {{fruitoptions}}',
  
                  link: function(scope, element, attrs) {
                    scope.fruitoptions = scope.$eval(attrs['fruitinfo']);
                  }
              };
          }])
  .directive('fruits',
      [
          function() {
              return {
                  restrict: 'E',
                  scope: {
                      selectedFruits: '=?', 
                      btnSizeClass: "@?"
                  },
                  template: 'btnSizeClass: {{btnSizeClass}}&lt;br&gt;Fruits: {{fruits}}&lt;br&gt;&lt;div ' +
                      '         fruitinfo="fruitOptions" ' +
                      '         fruitname="{{f}}"' +
                      '         ng-repeat="f in fruits"&gt;' +
                      '&lt;/div&gt;&lt;br&gt;&lt;br&gt;' +
                      '&lt;div fruitname="With static fruitOptions: {{f}}" fruitinfo="{test: \'testOption\', btnSizeClass: \'btn-xs\'}" ng-repeat="f in fruits"&gt;&lt;/div&gt;',
  
                  link: function(scope, element, attrs) {
                      scope.fruitOptions = {test: 'testOption', btnSizeClass: scope.btnSizeClass};
                      scope.fruits = ['Apple', 'Banana', 'Watermelon', 'Strawberry'];
  
  
                  }
              };
          }]
          )
  ;
  </code></pre>