title: Using the same directive on multiple elements
body: <p>I am trying to follow the example from <a href="https://stackoverflow.com/questions/14474555/how-to-format-a-date-using-ng-model">this stackoverflow discussion on date formatting</a>, it works very well for a page only has one single date field. However, if I have more than one date fields on the page, it seems like only <strong>the first date field/ng-model will get set</strong>, even other date fields are selected. </p>
  
  <p>Below is the HTML template code:</p>
  
  <pre><code>    &lt;div class="input-append" my-Datepickerloaded&gt;
          &lt;input type="text" ng-model="user.StartDate" my-Datepickerformater&gt;&lt;/input&gt;
          &lt;span class="add-on"&gt;
              &lt;i data-time-icon="icon-time" data-date-icon="icon-calendar"&gt;
              &lt;/i&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  
  
      &lt;div class="input-append" my-Datepickerloaded&gt;
          &lt;input type="text" ng-model="user.EndDate" my-Datepickerformater&gt;&lt;/input&gt;
          &lt;span class="add-on"&gt;
              &lt;i data-time-icon="icon-time" data-date-icon="icon-calendar"&gt;
              &lt;/i&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And here is the directive code (<strong>myDatePickerformater</strong>):</p>
  
  <pre><code>return {
              require: '^ngModel',
              restrict: 'A',
              link: function (scope, elm, attrs, ctrl) {
                  var moment = $window.moment,
                      dateFormat = 'MM/DD/YYYY';
  
                  attrs.$observe('myDatepickerformater', function (newValue) {
                      ctrl.$modelValue = new Date(ctrl.$setViewValue);
                  });
  
                  ctrl.$formatters.unshift(function (modelValue) {
                      scope = scope;
                      if (!dateFormat || !modelValue) return '';
                      var retVal = moment(modelValue).format(dateFormat);
                      return retVal;
                  });
  
                  ctrl.$parsers.unshift(function (viewValue) {
                      scope = scope;
                      var date = moment(viewValue, dateFormat);
                      return (date &amp;&amp; date.isValid() &amp;&amp; date.year() &gt; 1950) ? date.toDate() : "";
                  });
              }
          };
  </code></pre>
  
  <p>I have tried to do a $scope.$watch on the models they bind to, it seems like even if I am changing the <strong>user.EndDate</strong> input field, it is always <strong>user.StartDate</strong> gets the change and <strong>user.EndDate</strong> remain untouched, even if the "input" field is displaying both fields correctly. </p>
  
  <p>How do I make sure both fields will get their bind model updated correctly? </p>
  
  <p>Thank you for helping. </p>