title: Changing the format of an input date with AngularJs not working as expected
body: <p>Well, I want to show an <em>input date field</em> but with the format changed.</p>
  
  <p>I mean, the default format is: <code>yyyy-MM-dd (2015-11-20)</code>, but I want it: <code>(11-20-2015)</code>.</p>
  
  <p>There's a <a href="http://jsfiddle.net/g7mvaosL/150/" rel="nofollow">jsfiddle</a> I found with <code>momentjs</code> (without angular) and works exactly as I want.</p>
  
  <p>Working with AngularJs, I have done too with a directive, but with a <em>span field</em> (and works). But if I do with an input date, it doesn't works.</p>
  
  <p>This is the <strong>html</strong>:</p>
  
  <pre><code>&lt;body ng-app="docsTimeDirective"&gt;
    &lt;div ng-controller="Controller"&gt;
    Current date is: &lt;span my-current-time="format"&gt;&lt;/span&gt;&lt;hr/&gt;
    &lt;input type="date" ng-model="myDate.value" my-current-time="format"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the <strong>Js</strong>:</p>
  
  <pre><code>(function(angular) {
    'use strict';
  angular.module('docsTimeDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.format = 'MM/dd/yyyy';
      $scope.myDate = {
        value: new Date()
      };
    }])
    .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {
  
      function link(scope, element, attrs) {
        var format,
            timeoutId;
  
        function updateTime() {
          element.text(dateFilter(new Date(), format));
          console.log(dateFilter(new Date(), format));
        }
  
        scope.$watch(attrs.myCurrentTime, function(value) {
          format = value;
          updateTime();
        });
  
        element.on('$destroy', function() {
          $interval.cancel(timeoutId);
        });
  
        // start the UI update process; save the timeoutId for canceling
        timeoutId = $interval(function() {
          updateTime(); // update DOM
        }, 1000);
      }
  
      return {
        link: link
      };
    }]);
  })(window.angular);
  </code></pre>
  
  <p>Here is the <a href="http://plnkr.co/edit/e5WJ38Qc2Zl1ii6xYzKR?p=preview" rel="nofollow">Plunker</a>. Some ideas?</p>