angularjs ng-repeat with date range - angularjs

Question

I'm trying to filter a list that contains only the entries in a range of dates with die ui-bootstrap datepicker:
When I load the page first time the filter works fine but when I change the dates in the datepickers no entry will be shown. How can I pass the data through the filter with the new date ranges?
My custom filter:
angular.module('reklaApp')
.filter('dateFilter', function () {
return function (items, fromDate, toDate) {
var filtered = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.dt > fromDate && item.dt < toDate){
filtered.push(item);
}
}
return filtered;
};
});
my Model:
var ReklaSchema = new Schema({
dt: Date,
order: Number,
});
my View:
<div class="form-group">
<span class="input-group">
<input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="fromDate" is-open="datepickers.fromDate" min-date="" max-date="maxDate" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,'fromDate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</span>
</div>
bis
<div class="form-group">
<span class="input-group">
<input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="toDate" is-open="datepickers.toDate" min-date="" max-date="maxDate" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,'toDate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</span>
</div>
my View for the Filter:
<tr ng-repeat="rekla in reklas | dateFilter:fromDate:toDate">
<td>{{rekla.dt | date: 'dd.MM.yyyy'}}</td>
<td>{{rekla.order}}</td>
</tr>
my Controller:
angular.module('reklaApp')
.controller('MainCtrl', function ($scope, $http, Reklas, Modal) {
$scope.newRekla = {};
$scope.reklas = {};
$scope.fromDate = '2015-03-31T22:00:00.000Z';
$scope.toDate = '2015-04-30T22:00:00.000Z';
Reklas.getAll()
.success(function(data) {
$scope.reklas = data;
});
UPDATE:
I think the problem is the data type of the datepicker!?
Datepicker Data:
Model Data:

Answer 1

Call ng-change function in datepicker and apply filter again in ng-change function or else put watch on date variables and in watch function apply filter again.

Answer 2

you can call filter on ng-change and apply the filter on th model like this:
<input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="toDate" is-open="datepickers.toDate" min-date="" max-date="maxDate" date-disabled="disabled(date, mode)" ng-required="true" ng-change="filterDate()" close-text="Close" />
and in controller js create method filterDate() like this:
$scope.filterDate=function(){
$scope.toDate=$filter('dateFilter')($scope.toDate);
}