AngularJS Binded model to Select update input number field with min max

Question

Very confusing because I tried a lot of ways around it and all seem messy.

The view

<select ng-model="somemodel" ng-options="val as val.name for val in vals" ng-init="somemodel=vals[2]"></select>
<input type="number" ng-model="somemodel.value" min="{{somemodel.min}}" max="{{somemodel.max}}">
{{somemodel.value}}

The controller

function appCtrl($scope) {
$scope.somemodel = "";
$scope.vals = [
  {name:"a", min:"1", max:"10", value:4},
  {name:"b", min:"10", max:"20", value:14},
  {name:"c", min:"21", max:"31", value:24},
  {name:"d", min:"31", max:"41", value:34}];
}

When i change the select, it updates the model, but not the input. Whereas if i change the input it also updates the model. How can i get select to update view for the input in an AngularJS way?

Here the situation is demonstrated: http://jsfiddle.net/rq8qs/4/

Update: updated the fiddle

update2: changed value into number type

WORKAROUND http://jsfiddle.net/rq8qs/10/

Answer 1

Seeing that this is probably an (for now at least) unsolvable problem, due to the way the validator is implemented in the angular core. I think faking the behaviour is your best bet. For this, the following would work:

<input
  ng-model="v.value"

  ng-repeat="v in values"
  ng-if="v == selected"

  type="number"
  min="{{v.min}}"
  max="{{v.max}}"
>

demo: http://jsbin.com/AmOHoHa/2/