Multiple dropdown menus using AngularJs + Materialize.css

Question

I'm experiencing an annoying issue that I cannot fix. I'm using AngularJs to display a series of cards, each one having its own dropdown menu.

Here's the code:

<div ng-repeat="feedback in feedbacks"  
    class="card">
    <div class="cardMoreActionsButton">
        <a  class="dropdown-button" 
            dropdown 
            href="#"  
            data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">
            <i class="material-icons grey-icon">more_vert</i>
        </a>
        <ul id="cardMoreActions{{feedback.FeedbackTrackerId}}" 
            class="dropdown-content">
            <li>
                <a ng-click="archiveFeedback(feedback.FeedbackTrackerId)">
                     Archive feedback
                </a>
            </li>
        </ul>
    </div>
    Card content
</div>

When I run the code I got:

Error: Syntax error, unrecognized expression: #cardMoreActions{{feedback.FeedbackTrackerId}}

in

<a class="dropdown-button" dropdown="" href="#" data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">

What's the right way to write the expression to tell the element to activate the corresponding id. What's the correct way to use a materialize.css dropdown inside a ng-repeat directive?

To complete the request here's the activation code in the "dropdown" directive

TK.directive('dropdown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.dropdown();
        }, 
    }
});

Thanks everyone!

EDIT

I've found this question, which seems related

Creating a custom materialize directive that works with an {{expression}} in data-activates attribute

As suggested there, I've tried to add the ng-attr- prefix on both the attributes ("id" and "data-activation"). Unfortunately it doesn't work for me. This actually gets rid of the error message, but the dropdown menus don't show up, even if the "active" class is successfully attached to the dropdown button, the dropdown content remains hidden. Could it be related to the fact that my directive is looped inside a ngRepeat directive?

Thanks anyone for your help or feedback.

Here's the code after the edit, which unfortunately still doesn't work

<div ng-repeat="feedback in feedbacks"  
    class="card">
    <div class="cardMoreActionsButton">
        <a  class="dropdown-button" 
            dropdown 
            href="#"  
            ng-attr-data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">
            <i class="material-icons grey-icon">more_vert</i>
        </a>
        <ul ng-attr-id="cardMoreActions{{feedback.FeedbackTrackerId}}" 
            class="dropdown-content">
            <li>
                <a ng-click="archiveFeedback(feedback.FeedbackTrackerId)">
                     Archive feedback
                </a>
            </li>
        </ul>
    </div>
    Card content
</div>

Answer 1

This solves the problem

TK.directive('dropdown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.ready(function(){
                elem.dropdown();
            });         
        }, 
    }
});