AngularJS ng-bind to specific array element


I have elements in my page that's being repeated as rendered by ASP.Net MVC. (I need to do this for SEO purposes.)

Within these elements, I would like to have a text field that's bound by AngularJS.

Is there a way to do this?

In the code below, for example, the 2nd and 3rd text fields don't even allow me to type anything. Is it because I have not properly initialized the array or is there something wrong with the syntax?

<input type="text" ng-model="sometext" />
<input type="text" ng-model="sometextArray1[1]" />
<input type="text" ng-model="sometextArray2[1].value" />

<h1>Hello #1 {{ sometext }}</h1>
<h1>Hello #2 {{ sometextArray1[1] }}</h1>
<h1>Hello #3 {{ sometextArray2[1].value }}</h1>

Best Solution

If you are trying to let angular implicitly instantiate the array for you, I don't think arrays are assignable. If you are using a controller to instantiate your array this should work. I have created a fiddle.



<div ng-app="mod">  
    <section ng-controller="Ctrl">
        <input type="text" ng-model="someArray[0].value" ng-change="logValue(0)" />
        <input type="text" ng-model="someArray[1].value" ng-change="logValue(1)"/>
        <input type="text" ng-model="someArray[2].value" ng-change="logValue(2)"/>
        <input type="text" ng-model="someArray[3].value" ng-change="logValue(3)"/>


(function () {
    var app = angular.module('mod', []);

    app.controller('Ctrl', ['$scope', '$log', function ($scope, $log) {
        $scope.someArray = [
            {value: "value 0"}, 
            {value: "value 1"},
            {value: "value 2"}, 
            {value: "value 3"}

        $scope.logValue = function (index) {