Creating A Custom Materialize Directive That Works With An {{expression}} In Data-activates Attribute

I'm trying to get the materialize library to work together with Angular. To do so I've written an attribute directive that will initialize the dropdown menu on an element. However,

Solution 1:

Some more searching, and I found the answer. Posting it as such, should it help any other passer-by, and perhaps someone else can come up with a better answer?

The question is just about a duplicate of a combination of two questions:

• How to set the id attribute of a HTML element dynamically with angular js?
• Angular expression in (data-, red) attribute

So, just use ng-attr- prefix on both data-activates and id and you're good to go:

angular.module('foo', [])
  .directive('materialKebab', function() {
    return {
      link: function(scope, element, attrs) {
        $(element).dropdown();
      }
    };
  })
  .controller('bar', function($scope) {
    $scope.id = "abc123";
  });

.dropdown-button { cursor: pointer; background: #ddd; padding: 10px; display: inline-block; font-weight: bold; }

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script><divng-app="foo"ng-controller="bar">
  Now does work:
  <divclass="dropdown-button"ng-attr-data-activates="item_{{id}}"material-kebab>⋮</div><ulclass="dropdown-content"ng-attr-id="item_{{id}}"><li>Action 1</li><li>Action 2</li></ul></div>