Angular material datepicker not working inside ng repeat - angularjs

Question

I'm trying to use the date picker from angular material library. I'm able to make it work. But the problem is when I use the date picker inside a ng-repeat loop it doesn't seem to work. Even if I have only one list in my ng-repeat, it still doesn't work.
Not sure how to make this work.
div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate()">
<md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
Here is the plnkr.
Try clicking on the Tell Date button and it gives you only the current date and not the date that you select. But it would just work fine without ng-repeat.
Any help is appreciated.
Thanks

Answer 1

I believe this is because the md-datepicker creates it's own scope - If you use the controller as syntax this will work for you:
HTML:
<div ng-controller="AppCtrl as ac" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate()">
<md-datepicker ng-model="ac.myDate" md-placeholder="Enter date" md-min-date="minDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
Controller:
var vm = this;
$scope.tellDate = function() {
alert(vm.myDate);
}
I have updated the plnkr. In this scenario all of the date-pickers are bound to the same myDate variable though - not sure if this is the desired behaviour.

Answer 2

keithm is right. ng-repeat creates its own isolated scope. My suggestion would be to provide the particular date of each repeat to the "tellDate" function. So:
<div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate(myDate)">
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ...></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
And inside your controller:
$scope.tellDate = function(date) {
alert(date);
}