AngularJS Sample #4 - Filters

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <style>
      BODY { font-size: 2em;}
    </style>
    <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script src="app.js"></script>
    <script src="main.controller.js"></script>
    <script src="reverse-text.filter.js"></script>
  </head>
  <body>
    <div ng-controller='MainController'>
      <div>text: <strong>{{ someText | uppercase }}</strong></div>
      <div>date & time: <strong>{{ someDate | date: 'dd-MM-yyyy HH:mm:ss' }}</strong></div>
      <div>number: <strong>{{ 99812.5477 | number: 3 }}</strong></div>
      <div>money: <strong>{{ 99812.5477 | currency: '$' }}</strong></div>
      <div>custom: <strong>{{ someText | reverse }}</strong></div>
    </div>
  </body>
</html>

angular.module('myApp', []);

angular.module('myApp')
  .controller('MainController', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.someText = 'Some Text';
    
    tick();
    
    function tick() {
      $timeout(function() {
        $scope.someDate = new Date();
        tick();
      }, 1000);
    }
  }]);

angular.module('myApp')
.filter('reverse', function() {
  return function(input) {
    input = input || '';
    var out = "";
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }
    return out;
  };
});