<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="utf-8">
  <title>Formatting Filters</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script>
    var app = angular.module('filtersApp', []);

    app.controller('filtersCtrl', function($scope) {
      $scope.salary = 15000;
    });

    app.filter('fraction_Currency', ['$filter', '$locale',
      function(filter, locale) {
        var currency_Filters = filter('currency');
        var decimalFormat = locale.NUMBER_FORMATS;

        return function(amountVal, currencyType) {
          var currencyValue = currency_Filters(amountVal, currencyType);

          var result = currencyValue.indexOf(decimalFormat.DECIMAL_SEP);

          if (amountVal >= 0) {
            return currencyValue.substring(0, result);
          } else {
            return currencyValue.substring(0, result) + ')';
          }
        };
      }
    ]);
  </script>
</head>

<body ng-app="filtersApp">
  <div>
    <h1>Formatting Filters</h1>
  </div>
  <div ng-controller="filtersCtrl">
    <h4>{{salary | fraction_Currency }} AND {{-salary | fraction_Currency}}</h4>
    <h4>{{salary |  currency }} AND {{-salary | currency }}</h4>
  </div>
</body>

</html>
// Code goes here

/* Styles go here */