<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app = "myApp">
<div ng-controller =" FilterCtrl as ctrl" >
<div>
Amount as a number: {{ctrl.amount | number }}
</div>
<div>
Amount as a number: {{ctrl.amount | number:4 }}
</div>
<div>
Total Cost as a currency: {{ctrl.totalCost | currency}}
</div>
<div>
Total Cost in Euro: {{ctrl.totalCost | currency: "€" }}
</div>
<div>
Name: {{ctrl.name | uppercase }}
</div>
<div>
Name: {{ctrl.name | lowercase}}
</div>
<div>
Name: {{ctrl.name | lowercase| limitTo:7}}
</div>
<div>
JSON filter: {{ctrl.obj | json }}
</div>
<div>
Start time: {{ctrl.startTime | date}}
</div>
<div>
Start time: {{ctrl.startTime | date:'short' }}
</div>
<div>
Start time: {{ctrl.startTime | date:'medium' }}
</div>
</div>
</body>
</html>
var myApp = angular.module ('myApp',[])
myApp.controller('FilterCtrl',[function (){
this.amount = 1024;
this.totalCost = 34;
this.name = 'Diem Thuy';
this.startTime = new Date().getTime();
this.obj = {name: 'Thuy', age:22};
}]);
/* Styles go here */