title: insert character automatically while typing a date in angularJS
body: <p>Say I have this html:</p>
  
  <pre><code>&lt;input class="input-date" type="text" placeholder="DD.MM.YY" ng-model="hctrl.dateInput"&gt;
  </code></pre>
  
  <p>While the user is typing the date I want to automatically insert <code>.</code> at the proper places. </p>
  
  <p>I tried solving this with <code>$watch</code> like this:</p>
  
  <pre><code>.controller('homeController', ['$scope', function($scope){
          var controller = this;
          controller.pageClass = 'page-home'
          controller.dateInput = '';
  
          $scope.$watch(angular.bind(this, function() {
              return this.dateInput;
          }), function(newVal, oldVal){
  
              var str = newVal.replace(/[.]/g, "");
  
              console.log('oldVal: ' + oldVal + ' newVal: ' + newVal + ' str: ' + str);
  
              if(str.length % 2 == 0 &amp;&amp; str.length &gt;= 2 &amp;&amp; str.length &lt;= 6) {
                  console.log(str.length); 
                  controller.dateInput += '.';
              }    
          });
  
      }])
  </code></pre>
  
  <p>But this causes an infinite loop due to me adding to <code>controller.dateInput</code> while being inside the <code>$watch</code>. </p>
  
  <p>What would be a proper way to solve this?</p>