Date Formator

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div ng-app="sampleapp">
    <div ng-controller="samplecontoller" ng-init="init();">
      <div ng-repeat="date in dates" class="dateformatter">
        <span><strong>Time Format</strong> : {{ date.date1 | time }}</span>
        <span><strong>Date time Format</strong> : {{ date.date1 | datetime }}</span>
      </div>
    </div>
  </div>
  
</body>

</html>

var myapp = angular.module('sampleapp', []);
myapp.controller('samplecontoller', function($scope) {
  var date = 'Tue Jan 19 18:25:08 +0000 2010';
  $scope.dates = [{
    "date1": date
  }];
})

myapp.filter('time', function($filter) {
  return function(input) {
    if (input == null) {
      return "";
    }
    var _date = $filter('date')(new Date(input), 'HH:mm:ss');
    return _date.toUpperCase();
  };
})

myapp.filter('datetime', function($filter) {
  return function(input) {
    if (input == null) {
      return "";
    }
    var _date = $filter('date')(new Date(input),
      'MMM dd yyyy - HH:mm:ss');
    return _date.toUpperCase();
  };
})

/* Styles go here */

.dateformatter{
    padding:10px;
}
.dateformatter span{
    color:#000 ;
    display:block;
    margin:5px 0px;
}
strong{
    width:200px;
    display:inline-block;
}