title: AngularJS how to bind data
body: <p>I've this <em>HTML</em> markup using <em>Bootstrap</em>:</p>
  
  <pre><code>&lt;div class="col-sm-6" ng-app ng-controller="MyController"&gt;   
      &lt;br/&gt;&lt;br/&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" name="input" class="form-control" ng-model="input" ng-maxlength="18" ng-minlength="18" placeholder="Type input.." aria-describedby="basic-addon2"&gt;
          &lt;span class="input-group-addon" id="basic-addon2" ng-bind="inputMaxLength"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this <em>AngularJS</em> controller:</p>
  
  <pre><code>function MyController($scope) {
      $scope.input = "";
      $scope.inputMaxLength = 18;
  }
  </code></pre>
  
  <p>What is the recommended solution for implementing the "charaters left" feature in the <em>bootstrap addon</em>? Further, how can I change the input field so that I cannot type in more then 18 charaters?</p>
  
  <p>See this demo example:
  <a href="http://jsfiddle.net/dennismadsen/7ugzn76s/2/" rel="nofollow">http://jsfiddle.net/dennismadsen/7ugzn76s/2/</a></p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>I've updated the JSFiddle, based on your answers. But the countdown does not work:
  <a href="http://jsfiddle.net/dennismadsen/7ugzn76s/3/" rel="nofollow">http://jsfiddle.net/dennismadsen/7ugzn76s/3/</a></p>