AngularJS conditionally add a custom 'data-toggle' attribute

Question

I have the following directive:

myDirective.directive('sidebar', function () {
  return {
    restrict: 'E',
    replace: true,
    template: '<li ng-repeat="m in menu" ng-class="{\'dropdown\':m.submenu}">' +
      '<a href="{{m.url}}" ng-class="{\'dropdown-toggle\':m.submenu}" ng-attr="{\'data-toggle=dropdown\': m.submenu">' +
      '<i class="{{m.image}}"></i>' +
      ' {{m.name}}' +
      '<b class="caret" ng-if="m.submenu"></b>' +
      '</a>' +
      '<ul ng-if="m.submenu" class="dropdown-menu">' +
      '<li ng-repeat="s in m.submenu"><a href="{{s.url}}"><i class="{{s.image}}"></i> {{s.name}}</a></li>' +
      '</ul>' +
      '</li>',

    link: function (scope, elem, attrs) {
      scope.menu = [
        {
          "name": "Home",
          "url": "/",
          "image": "fa fa-bar-chart-o"
        },
        {
          "name": "Data Integration",
          "url": "/manage/dataintegration/index",
          "image": "fa fa-dashboard"
        },
        {
          "name": "Users",
          "url": "/manage/users/index",
          "image": "fa fa-dashboard"
        },
        {
          "name": "Logger",
          "url": "/manage/logger/index",
          "image": "fa fa-dashboard"
        },
        {
          "name": "Drop",
          "url": "",
          "image": "fa fa-dashboard",
          "submenu": [
            {
              "name": "Logger",
              "url": "/manage/logger/index",
              "image": "fa fa-dashboard"
            },
            {
              "name": "Logger2",
              "url": "/manage/logger/index",
              "image": "fa fa-dashboard"
            }
          ]
        }
      ]

    }
  }
});

I'm trying to get the data-toggle='dropdown' attribute to the a tag only if m.submenu exists using ng-attr but it doesn't work.

Answer 1

Assuming that's verbatim:

ng-attr="{\'data-toggle=dropdown\': m.submenu"

Is missing a closing }