JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
    <h2>Past items</h2>
    <div ng-repeat="item in list | filter: isPast">
      {{item.key1}}
    </div>
    <h2>Future items</h2>
    <div ng-repeat="item in list | filter: !isPast">
      {{item.key1}}
    </div>
</div>

JavaScript

angular.module('app', [])
  .controller('controller', function($scope) {

$scope.isPast = function(item)
{
var now = new Date();
return (item.dateFrom <= now);
}

$scope.ElementOne = {
    "key1": "Data 1",
    "dateFrom": new Date(),
    "dateTo": new Date(),
    "keyBoolOne": false,
    "keyBoolTwo": true
};

$scope.ElementTwo = {
    "key1": "More Data here",
    "dateFrom": new Date(),
    "dateTo": new Date(),
    "keyBoolOne": true,
    "keyBoolTwo": true
};

$scope.ElementThree = {
    "key1": "More More Data here",
    "dateFrom": new Date(),
    "dateTo": new Date(),
    "keyBoolOne": false,
    "keyBoolTwo": false
};

$scope.ElementFour = {
    "key1": "Info 1",
    "dateFrom": new Date(2017,12,12),
    "dateTo": new Date(2017,12,12),
    "keyBoolOne": true,
    "keyBoolTwo": false
};

$scope.list = [];
$scope.list.push($scope.ElementOne);
$scope.list.push($scope.ElementTwo);
$scope.list.push($scope.ElementThree);
$scope.list.push($scope.ElementFour);
  });