Angular JS Ng-model doesn't bind an input - html

Question

I am facing a problem in Angular JS. Here is the code I wrote :
<script>
function diveInput($scope) {
$scope.dive_points = [ {depth: 0, date: 0}, {depth: 43, date: 1} ]
}
</script>
<div ng-app ng-controller="diveInput">
<ul>
<li ng-repeat="dive_point in dive_points">
<label>date :</label> <input type="number" min="0" ng-model="dive_point.date" />
<label>depth :</label> <input type="number" max="0" ng-model="dive_point.depth"/>
</li>
</ul>
<pre>{{dive_points}}</pre>
</div>
The expected behaviour is to see the two initials depth points in the inputs (0/0 and 1/43).
Then, if I change the value of an input, I except to see this modifications in the "" tag.
I did JSFiddle for this code if you want to play with it.
Why only the date of the second dive_point is displayed and not the depth ?
Why when I change one of the depth value, nothing works, the depth field disapear of the "pre" tag ?

Answer 1

You've got set max to 0 max="0" in your
<input type="number" max="0" ng-model="dive_point.depth" />
and in your controller you set depth to 43 so it was out of allowed range.
Please see working demo below
'use strict';
function diveInput($scope) {
$scope.dive_points = [{
depth: 0,
date: 0
}, {
depth: 43,
date: 1
}]
$scope.addDivePoint = function() {
$scope.dive_points.push({
depth: 0,
date: 0
});
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="diveInput">
<ul>
<li ng-repeat="dive_point in dive_points">
<div>
<label>date :</label>
<input type="number" min="0" ng-model="dive_point.date" />
</div>
<div>
<label>depth :</label>
<input type="number" max="50" ng-model="dive_point.depth" />
</div>
</li>
</ul>
<pre>{{dive_points}}</pre>
</div>