Add Directive Attribute to Directive Element

Question

I have a directive element:

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

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

        }
    };

HTML:

<my-directive show-more="true"></my-directive>

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

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

---

UPDATE:

Within my if statement, i can add an attribute via:

var item = element.find("li");
item.attr("myAnimationDirective", "");

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).

Answer 1

Solved adding

$compile(element)(scope);