Search code examples
javascriptangularjsangularjs-ng-model

ng-model returns name of value in place of real value

I have html page using angular.

I have a table with ng-repeat on array:

<tr ng-repeat="oblig in Obligations">

oblig object contains property of chargeOptionId connected to another array ChargeOptions.

Inside the table there is a select element that I want to show details of charge option of oblig.

html code: 

<select class="form-control full-width" ng-model="oblig.ChargeOptionId">
        <option ng-selected="ch.Id == oblig.ChargeOptionId" value="ch.Id" ng-repeat="ch in ChargeOptions">{{ch.Account}}</option>
</select>

the select element display the charge option details as I want, but when I try saving oblig, oblig.ChargeOptionId="ch.Id" string in place of value of ch.Id.

I tried:

1) using ng-value, but the select did not display the data correctly.

2) ng-options, but still data was not displayed correctly.

how can I fix that problem?

Solution

  • Change

    value="ch.Id"

    to

    value="{{ch.Id}}"

    or

    ng-value="ch.Id"

    The attribute "value" is not an angular directive (like ng-model and ng-value are) so it doesn't know you intend "ch.Id" as a variable.

    jsbin