Error: [$parse:syntax] Syntax Error: Token 'in' is an unexpected token

Question

I'm trying to change the string (using 'topic in topics' below) in a dropdown inside of a custom directive and getting this syntax error.

When I set the 'topic in topics' expression to ng-repeat on that element, it repeats each dropdown 3 times (i.e. 3 dates, 3 status, 3 companies). Like so:

The only thing I want to do here is dynamically change the topic for each dropdown. Any help is appreciated.

Here is my directive (app.js):

var varMyDirectivesApplication =
        angular.module('myDirectivesApplication', []);

    varMyDirectivesApplication.directive('dropdownMultiselect', function () {
        return {
            restrict: 'E',
            scope: {
                model: '=',
                options: '=',
            },
            template:

            "<div data-ng-class='{open: open}'>" +"<li data-ng-class='{open: open}'>" +
                "<a class='dropdown-toggle'>Select {{ topic in topics }}</a>" +
                "</li>" +

                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +

                    "<li data-ng-repeat='option in options'>

                        <a>{{option.name}}</li>" +

                "</ul>" +

            "</div>",

            controller: function ($scope) {

                $scope.topics = ['Date', 'Status', 'Company'];

            }

        }

    }

 $scope.dates = [
            { "id": "1 Week", "name": "1 Week" },
            { "id": "2 Weeks", "name": "2 Weeks" },
            ...
 ];

 $scope.statuses = [
      { "id": "Draft", "name": "Draft" },
      { "id": "Inbound", "name": "Inbound" },
      ...
  ];

  $scope.companies = [
       { "id": "ABC Manufacturing", "name": "ABC Manufacturing" },
       ...
  ];

$scope.selectedIds = [];

});

HTML:

<dropdown-multiselect model="selectedIds" options="dates"></dropdown-multiselect>

<dropdown-multiselect model="selectedIds" options="statuses"></dropdown-multiselect>

<dropdown-multiselect model="selectedIds" options="companies"></dropdown-multiselect>

<ul class="list-unstyled margin-0" >
    <li data-ng-repeat="item in selectedIds" class="pointer-hover" ng-click="remove(item)">
        {{ item }}
    </li>
</ul>

Answer 1

One way to do this would be to pass the topic into the directive as an attribute.

Something like this:

<dropdown-multiselect model="selectedIds" options="dates" topic="Date"></dropdown-multiselect>

Your directive would then look like this:

varMyDirectivesApplication.directive('dropdownMultiselect', function () {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
            topic: '@'
        },
        template:
            "<div data-ng-class='{open: open}'>" +"<li data-ng-class='{open: open}'>" +
                "<a class='dropdown-toggle'>Select {{ topic }}</a>" +
                "</li>" +
                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
                    "<li data-ng-repeat='option in options'>
                        <a>{{option.name}}</li>" +
                "</ul>" +
            "</div>"
    }
}