title: angular js: ng-min \ ng-max
body: <p>I using angular js, combined with angular ui, to show modal window in my website.
  <strong>HTML</strong></p>
  
  <pre><code>&lt;script type="text/ng-template" id="myModalContent.html"&gt;
      &lt;div class="modal-header text-center"&gt;
          &lt;h3 class="modal-title" id="modal-title"&gt;Jump to page&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body text-center" id="modal-body"&gt;
          &lt;input type="number" ng-model="info.page" class="text-center" ng-enter="ok()" ng-min="{{info.min}}" ng-max="{{info.max}}" /&gt;
          &lt;div&gt;MAX: {{info.max}}&lt;/div&gt;
          &lt;div&gt;MIN: {{info.min}}&lt;/div&gt;
          &lt;button class="btn btn-primary" type="button" ng-click="ok()" style="margin-top: 20px;"&gt;OK&lt;/button&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The user have to fill an input number in a range of <code>info.max</code> to <code>info.min</code>.</p>
  
  <p>Here the relevant angular code - Triggering the modal window opening:</p>
  
  <pre><code>function gotoPageDialog(fileNo, current, max) {
      var modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: 'sm',
          resolve: {
              current_info: function() {
                  return {
                      fileNo: fileNo,
                      page: current,
                      max: max,
                      min: 1
                  }
              }
          }
      });
  
      modalInstance.result.then(function(result) {
              //...
          };
      }
  }
  </code></pre>
  
  <p>And the modal window it self:</p>
  
  <pre><code>app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance, current_info) {
      $scope.info = current_info;
  
      $scope.ok = function() {
          $uibModalInstance.close($scope.info);
      };
  
      $scope.cancel = function() {
          $uibModalInstance.dismiss('cancel');
      };
  });
  </code></pre>
  
  <p>The result is:</p>
  
  <p><a href="https://i.stack.imgur.com/RgtSY.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/RgtSY.jpg" alt="enter image description here"></a></p>
  
  <p>The input value is "-1", What's mean that the <code>ng-min</code> and <code>ng-max</code> range is not working.</p>
  
  <p>What I'm doing wrong?</p>
  
  <p>Thank you.</p>