angular js: ng-min \ ng-max

Question

I using angular js, combined with angular ui, to show modal window in my website. HTML

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header text-center">
        <h3 class="modal-title" id="modal-title">Jump to page</h3>
    </div>
    <div class="modal-body text-center" id="modal-body">
        <input type="number" ng-model="info.page" class="text-center" ng-enter="ok()" ng-min="{{info.min}}" ng-max="{{info.max}}" />
        <div>MAX: {{info.max}}</div>
        <div>MIN: {{info.min}}</div>
        <button class="btn btn-primary" type="button" ng-click="ok()" style="margin-top: 20px;">OK</button>
    </div>
</script>

The user have to fill an input number in a range of info.max to info.min.

Here the relevant angular code - Triggering the modal window opening:

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) {
            //...
        };
    }
}

And the modal window it self:

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');
    };
});

The result is:

The input value is "-1", What's mean that the ng-min and ng-max range is not working.

What I'm doing wrong?

Thank you.

Answer 1

Change ng-min and ng-max to

min="{{info.min}}"

max="{{info.max}}"

Answer 2

Change your ng-min and ng-max sintax to

ng-min="{{info.min}}"

ng-max="{{info.max}}"