angular formatters and parsers

directives.js

'use strict';
 (function() {
     angular.module('notes')
         .directive('displayDate', [displayDate])

     function displayDate() {
         return {
             restrict: 'A',
             require: 'ngModel',
             link: function(scope, element, attrs, ngModelCtrl) {
              //format text from the user (view to model)
                 ngModelCtrl.$parsers.push(function(data) {
                     return moment(new Date(data)).format();
                 });
                 //format text going to user (model to view)
                 ngModelCtrl.$formatters.push(function(data) {
                     return moment(new Date(data)).format(attrs.format);
                 })
             }
         }
     }
 })();

formatter_parser.html

<div class="table-responsive">
     <table >
         <tbody class="no-borders">
             <tr>
                 <td>
                     <h3 class="control-label">Date Time Picker: </h3>
                 </td>
                 <td>
                      <input class="form-control" 
                        format=""
                        ng-model="formatterParserCtrl.dateTime" 
                        display-date  />
                 </td>
             </tr>
             <tr>
                 <td>
                     <h3 class="inline">Model Value: </h3>
                 </td>
                 <td>
                     
                 </td>
             </tr>
         </tbody>
     </table>
 </div>

formatter_parser.js

'use strict';
 (function() {
     angular.module('notes')
         .controller('formatterParserController', [formatterParserController])

     function formatterParserController() {
         var self = this;
         self.dateFormat = 'YYYY-MM-DD';
         self.dateTime = new Date();
     }
 })();