Add Directive Attribute to Directive Element
<p>I have a directive element:</p>

<pre><code>return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template:   '&lt;ul&gt;' +
                        '&lt;li {{myNewAttrDirective}}&gt;Home&lt;/li&gt;' +
                        '&lt;li {{myNewAttrDirective}}&gt;Products&lt;/li&gt;' +
                        '&lt;li {{myNewAttrDirective}}&gt;Cart&lt;/li&gt;' +
                        '&lt;li {{myNewAttrDirective}}&gt;Contact Us&lt;/li&gt;' +
                    '&lt;/ul&gt;',
        scope: {
              _showMore : '=showMore'
        },
        link: function(scope, element, attrs) {

            if (scope._showMore === true) {
               scope.myNewAttrDirective = 'myAnimationDirective'
            }

        }
    };
</code></pre>

<p>HTML:</p>

<pre><code>&lt;my-directive show-more="true"&gt;&lt;/my-directive&gt;
</code></pre>

<p>So essentially, if <code>show-more</code> is equal to true, then replace <code>{{myNewAttrDirective}}</code> with an attribute directive i have i.e <code>my-attr-directive</code>.</p>

<p>I have tried with the above if statement, but as expect, in the html, i am left with <code>&lt;li {{myNewAttrDirective}}&gt;Home&lt;/li&gt;</code></p>

<hr>

<p>UPDATE:</p>

<p>Within my if statement, i can add an attribute via:</p>

<pre><code>var item = element.find("li");
item.attr("myAnimationDirective", "");
</code></pre>

<p>Which is rendered in the HTML, but the click events do not respond. (They do work if i added them to my original directive however).</p>