Get/Set values of dynamical generated input fields using ng-repeat in Angular

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

My quesiton was:

I have an input field which once filled with a number populates that count of additional input fields. I can’t figure out how to get the values inserted in those generated input fields. Any help is appreciated, and oh, I did try various things and even with angular.element, or solely with jquery, but failed, so any explanation on how to do this is welcome.

Here is my jsfiddle, and the code c/p-ed here:

<div ng-controller="MyCtrl">
    <input type="text" ng-model="cntInputs" placeholder="#Inputs"><br/>

    <input ng-repeat="i in getTimes()" type="text" placeholder="{{i}}" id="input_{{i}}">

    <ul>
        <li ng-repeat="j in getTimes()">
            Inputed value is: {{getValue(j)}}
        </li>
    </ul>
</div>

js:

var myApp = angular.module('myApp', []);


function MyCtrl($scope) {
    $scope.cntInputs = 0;

    $scope.getTimes=function(){
        var a = new Array();

        for(var i=1; i <= $scope.cntInputs; i++)
            a.push(i);

        return a;       
    };

    $scope.getValue = function(id){
        //here get the value of that inserted in the element with the id of "input_" + id
        return angular.element("input_" + id);
    }
}

The answer, by James Kleeh, was:

So add ng-model="inputs[i-1]" to your text field

Then in your controller add $scope.inputs= [];

Then in your getValue function: return $scope.inputs[id-1];

If you make your getTimes function 0 based you wouldn’t need the -1s

Updated your fiddle: http://jsfiddle.net/7MhLd/60/

Written by Nikola Brežnjak