Angular Date format

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script>
    var app = angular.module("app", []);
    app.controller("exampleController", function($scope) {
      $scope.now = new Date();
    })
  </script>
</head>

<body ng-controller="exampleController">
  <table>
    <tr>
      <td>raw date</td>
      <td>{{now}}</td>
    </tr>
    <tr>
      <td>MMddyyyy</td>
      <td>{{now|date: "MMddyyyy"}}</td>
    </tr>
    <tr>
      <td>MM/dd/yyyy</td>
      <td>{{now|date: "MM/dd/yyyy"}}</td>
    </tr>
    <tr>
      <td>MM/dd/yyyy hh:mm:ssa (0-12 AMPM)</td>
      <td>{{now|date: "MM/dd/yyyy hh:mm:ss a"}}</td>
    </tr>
    <tr>
      <td>MM/dd/yyyy HH:mm:ss (0-23)</td>
      <td>{{now|date: "MM/dd/yyyy HH:mm:ss"}}</td>
    </tr>
    <tr>
      <td>MM/dd/yyyy hh:mm:ssa (0-12 China Time Zone)</td>
      <td>{{now|date: "MM/dd/yyyy hh:mm:ssa" :'+0800'}}</td>
    </tr>
    <tr>
      <td>short datetime</td>
      <td>{{now|date: "short"}}</td>
    </tr>
    <tr>
      <td>longDate</td>
      <td>{{now|date: "longDate"}}</td>
    </tr>
    <tr>
      <td>fullDate</td>
      <td>{{now|date: "fullDate"}}</td>
    </tr>
    <tr>
      <td colspan="2" style="text-align:center">
        Datetime in Chinese
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <iframe src="date-in-Chinese.html" width="100%" height="250px" frameborder="0"></iframe>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align:center">
        More references 
      </td>  
    </tr>
    <tr>
      <td colspan="2" style="text-align:center">
        https://docs.angularjs.org/api/ng/filter/date<br/>
        https://docs.angularjs.org/guide/i18n<br/>
        https://github.com/angular/angular.js/tree/master/src/ngLocale
      </td>  
    </tr>
  </table>
</body>

</html>

// Code goes here

table {
  border: 1px solid black;
}
table td {
  border: 1px solid black;
  width: 500px;
}

'use strict';
angular.module("ngLocale", [], ["$provide", function($provide) {
var PLURAL_CATEGORY = {ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other"};
$provide.value("$locale", {
  "DATETIME_FORMATS": {
    "AMPMS": [
      "\u4e0a\u5348",
      "\u4e0b\u5348"
    ],
    "DAY": [
      "\u661f\u671f\u65e5",
      "\u661f\u671f\u4e00",
      "\u661f\u671f\u4e8c",
      "\u661f\u671f\u4e09",
      "\u661f\u671f\u56db",
      "\u661f\u671f\u4e94",
      "\u661f\u671f\u516d"
    ],
    "ERANAMES": [
      "\u516c\u5143\u524d",
      "\u516c\u5143"
    ],
    "ERAS": [
      "\u516c\u5143\u524d",
      "\u516c\u5143"
    ],
    "FIRSTDAYOFWEEK": 6,
    "MONTH": [
      "\u4e00\u6708",
      "\u4e8c\u6708",
      "\u4e09\u6708",
      "\u56db\u6708",
      "\u4e94\u6708",
      "\u516d\u6708",
      "\u4e03\u6708",
      "\u516b\u6708",
      "\u4e5d\u6708",
      "\u5341\u6708",
      "\u5341\u4e00\u6708",
      "\u5341\u4e8c\u6708"
    ],
    "SHORTDAY": [
      "\u5468\u65e5",
      "\u5468\u4e00",
      "\u5468\u4e8c",
      "\u5468\u4e09",
      "\u5468\u56db",
      "\u5468\u4e94",
      "\u5468\u516d"
    ],
    "SHORTMONTH": [
      "1\u6708",
      "2\u6708",
      "3\u6708",
      "4\u6708",
      "5\u6708",
      "6\u6708",
      "7\u6708",
      "8\u6708",
      "9\u6708",
      "10\u6708",
      "11\u6708",
      "12\u6708"
    ],
    "WEEKENDRANGE": [
      5,
      6
    ],
    "fullDate": "y\u5e74M\u6708d\u65e5EEEE",
    "longDate": "y\u5e74M\u6708d\u65e5",
    "medium": "y\u5e74M\u6708d\u65e5 ah:mm:ss",
    "mediumDate": "y\u5e74M\u6708d\u65e5",
    "mediumTime": "ah:mm:ss",
    "short": "yy/M/d ah:mm",
    "shortDate": "yy/M/d",
    "shortTime": "ah:mm"
  },
  "NUMBER_FORMATS": {
    "CURRENCY_SYM": "\u00a5",
    "DECIMAL_SEP": ".",
    "GROUP_SEP": ",",
    "PATTERNS": [
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 3,
        "minFrac": 0,
        "minInt": 1,
        "negPre": "-",
        "negSuf": "",
        "posPre": "",
        "posSuf": ""
      },
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 2,
        "minFrac": 2,
        "minInt": 1,
        "negPre": "\u00a4\u00a0-",
        "negSuf": "",
        "posPre": "\u00a4\u00a0",
        "posSuf": ""
      }
    ]
  },
  "id": "zh-cn",
  "pluralCat": function(n, opt_precision) {  return PLURAL_CATEGORY.OTHER;}
});
}]);

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
   <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="angular-locale_zh-cn.js"></script>
  <script>
    var app = angular.module("app", []);
    app.controller("exampleController", function($scope) {
      $scope.now = new Date();
    })
  </script>
</head>

<body ng-controller="exampleController">
  <table>
    <tr>
      <td>raw date</td>
      <td>{{now}}</td>
    </tr>
    <tr>
      <td>MMddyyyy</td>
      <td>{{now|date: "MMddyyyy"}}</td>
    </tr>
    <tr>
      <td>MM/dd/yyyy</td>
      <td>{{now|date: "MM/dd/yyyy"}}</td>
    </tr>
    <tr>
      <td>MM/dd/yyyy hh:mm:ssa (0-12 AMPM)</td>
      <td>{{now|date: "MM/dd/yyyy hh:mm:ss a"}}</td>
    </tr>
    <tr>
      <td>MM/dd/yyyy HH:mm:ss (0-23)</td>
      <td>{{now|date: "MM/dd/yyyy HH:mm:ss"}}</td>
    </tr>
    <tr>
      <td>MM/dd/yyyy hh:mm:ssa (0-12 China Time Zone)</td>
      <td>{{now|date: "MM/dd/yyyy hh:mm:ssa" :'+0800'}}</td>
    </tr>
    <tr>
      <td>short datetime</td>
      <td>{{now|date: "short"}}</td>
    </tr>
    <tr>
      <td>longDate</td>
      <td>{{now|date: "longDate"}}</td>
    </tr>
    <tr>
      <td>fullDate</td>
      <td>{{now|date: "fullDate"}}</td>
    </tr>
  </table>
</body>

</html>