No instance found for handle for md-sidenav inside ng-repeat

Question

I'm trying to create a stack of multiple, dynamically created md-sidenavs. I can push their IDs onto a stack, but can not toggle them while using ng-repeat.

Using:

app.controller('MenuCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav) {
  var stack = [];

  $scope.getStack = function() {
    return stack;
  }

  $scope.add = function(id) {
    stack.push(id);
  }

  $scope.toggle = function(id) {
    $mdSidenav(id).toggle();
  }
}]);

with:

<md-button ng-click="add('test')" class="menuBtn">Add</md-button>
<md-button ng-click="toggle('test')" class="menuBtn">Toggle</md-button>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="{{id}}" ng-repeat="id in getStack()">
  {{id}}
</md-sidenav>

Clicking on the Add button produces the md-sidenav element in the doc as expected. However, the Toggle button does nothing besides produce a "No instance found for handle test" error in the console. Declaring a static md-sidenav with md-component-id="test" works fine. I'm using AngularJS 1.3.15 and Angular Material 0.8.3.

Answer 1

From the `Sidenav' directive source it doesn't seem to accept dynamic value for md-component-id