title: Format issue with angular directive
body: <p>Trying to learn AngularJS (v 1.x) and having some issues with how to best approach a scenario I have.   </p>
  
  <p>I want to be able to display an html input control to the user that allows them to enter a % for interest rates.   In the database, I want to store the value as a decimal with no formatting (eg.  0.25 for 25%), but in the UI I want to be able to display the 25%.   If the user enters a value into the input, I want them to be able to enter it as 25 (without the %) and have the data sent to database as .25 (ie...no backend validation to "format", just validate the value is in acceptable range 0-1).  Based on all the examples I have seen online so far, a custom directive is the best way to approach this.  I built a simple directive that is working to accomplish most of my requirement, but it won't display the % if the user hand enters a value and leaves the field.   It just stays as 25.   I created a simple <a href="http://jsfiddle.net/tmdxv10c/" rel="nofollow">Fiddle</a> that shows this behavior.</p>
  
  <p>What I am trying to figure out is how to use the directive I have built to handle formatting of the data whether it is put into the model via code or manually by the user.   Any help is greatly appreciated.</p>
  
  <p>Here is the code for completeness:</p>
  
  <p><b>HTML</b></p>
  
  <pre><code>&lt;body ng-app="app" ng-controller="ctrl"&gt;
      &lt;input my-directive name="test" ng-model="item" placeholder="Type in a percentage as a whole #..." style="display:block;width:100%;"&gt;
      &lt;button type="button" ng-click="item = .25"&gt;Set model to "25%"&lt;/button&gt;&lt;/br&gt;
      &lt;label&gt;Value:&lt;/label&gt;
      &lt;span ng-bind="item"&gt;&lt;/span&gt;
  &lt;/body&gt;        
  </code></pre>
  
  <p><b>Javascript</b></p>
  
  <pre><code>angular.module("app", []);
  
  angular.module("app").controller("ctrl", function($scope){
  $scope.item = '.49';
  
  $scope.$watch('item', function(newVal, oldVal){
      if (newVal !== oldVal){
          console.log(newVal);
      }
  });
  });
  
  angular.module("app").directive("myDirective", function(){
     return {
    require: 'ngModel',
    link: function (scope, element, attrs, controller) {
          controller.$parsers.push(function (data) {
              //convert data from view format to model format
  
              if (data) {
                  return data / 100;
              }
              else {
                  return 0;
              }
          });
  
          controller.$formatters.push(function (data) {
              //convert data from model format to view format
              if (data) {
                  return (data * 100).toFixed(3).toString() + "%";
              }
              else
              {
                  return "0.000%";
              }
          });
      }
  };
  });
  </code></pre>