@workInProgress
@ngdoc overview
@name angular.formatter
@namespace Namespace for all formats.
@description
# Overview
The formatters are responsible for translating user readable text in an input widget to a
data model stored in an application.

# Writting your own Formatter
Writing your own formatter is easy. Just register a pair of JavaScript functions with
`angular.formatter`. One function for parsing user input text to the stored form,
and one for formatting the stored data to user-visible text.

Here is an example of a "reverse" formatter: The data is stored in uppercase and in
reverse, while it is displayed in lower case and non-reversed. User edits are
automatically parsed into the internal form and data changes are automatically
formatted to the viewed form.

<pre>
function reverse(text) {
  var reversed = [];
  for (var i = 0; i < text.length; i++) {
    reversed.unshift(text.charAt(i));
  }
  return reversed.join('');
}

angular.formatter('reverse', {
  parse: function(value){
    return reverse(value||'').toUpperCase();
  },
  format: function(value){
    return reverse(value||'').toLowerCase();
  }
});
</pre>

@example
<doc:example>
 <doc:source>
  <script type="text/javascript">
  function reverse(text) {
    var reversed = [];
    for (var i = 0; i < text.length; i++) {
      reversed.unshift(text.charAt(i));
    }
    return reversed.join('');
  }

  angular.formatter('reverse', {
    parse: function(value){
      return reverse(value||'').toUpperCase();
    },
    format: function(value){
      return reverse(value||'').toLowerCase();
    }
  });
  </script>

  Formatted:
  <input type="text" name="data" value="angular" ng:format="reverse"/>
  <br/>

  Stored:
  <input type="text" name="data"/><br/>
  <pre>{{data}}</pre>
 </doc:source>
 <doc:scenario>
  it('should store reverse', function(){
   expect(element('.doc-example-live input:first').val()).toEqual('angular');
   expect(element('.doc-example-live input:last').val()).toEqual('RALUGNA');

   this.addFutureAction('change to XYZ', function($window, $document, done){
     $document.elements('.doc-example-live input:last').val('XYZ').trigger('change');
     done();
   });
   expect(element('.doc-example-live input:first').val()).toEqual('zyx');
  });
 </doc:scenario>
</doc:example>

