ng-click inside md-list-item

Trying to reproduce a bug with ng-click inside md-list-item

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="sandbox">
<div ng-controller="ctrl as vm">
   {{vm.x}}
	<md-list flex style="width:200px; margin: 0 auto;">
		<md-list-item
			role="listitem"
			tabindex="-1"
      ng-repeat="item in vm.items"
			ng-click="activate(item)"
      style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
		>
    <span style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
    {{item.text}} clicked: {{item.clicked}}
    </span>
    
		</md-list-item>
	</md-list>
</div>
</div>

CSS

main {
    background: ivory;
}
img {
    max-width:100%;
    width:100%;
}

JavaScript

angular
	.module('sandbox', ['ngMaterial', ])
  .controller('ctrl', ['$scope', function($scope) {
    var vm = this;
    this.items = [{
    	text: 'a here is too much text and it fucks up',
      clicked: false
    },{
    	text: 'b',
      clicked: false
    },{
    	text: 'c',
      clicked: false
    }]
    
    $scope.activate = function(item) {
      console.log('item', item)
      item.clicked = true;
    };
  }]);