ng-model value inside ng-repeat not working

Question

Having difficulty to assign ng-model values inside ng-repeat

So i am repeating this div with an array of json objects. I can print the 'ID' value of the object inside any element. But i can't use that as the ng-model value for the checkbox inside. I must be doing something wrong here. Any idea what that is?

Will really appreciate it if someone can take a look.

Here is a codepen of the issue. Code pen link

.

Answer 1

value for the model that assign to the checkbox is boolean whether it is true or false, unless you define the value. but again it is only 2 options value.

so, rather than using id as model attribute, you might change it to some attribute that could store boolean value. why not using 'isSelected'

<div ng-controller="quoteController" ng-app="MyApp" class="benefits-container">
    <!-- benefits -->
      <div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}">
          <div class="top">
              <md-checkbox ng-model="pe.isSelected" class="blue"></md-checkbox>
              <h5 class="item">{{pe.name}}</h5>
              <h5 class="prize">{{pe.loading}}</h5>
          </div>
          <div class="bottom">
              <p>{{pe.limitDisplay}}</p>
          </div>
      </div>
  </div>

then update some isSelected value:

...
{
  "id": "PVC022",
  "name": "NCD Protector",
  "limit": null,
  "limitDisplay": "N/A",
  "desc": "<TBC>",
  "type": "optional",
  "loading": 0.0,
  "isSelected": true
},
...

Answer 2

i have done exactly the same code the difference is the filter that you applied on ng-bind. try reading the article i suggest use ng-value.

whats the difference between ng-model and ng-value

Answer 3

try using ng-repeat and ng-model withing the same line.

instead of this

<div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}">
          <div class="top">
              <md-checkbox ng-model="pe.id" class="blue"></md-checkbox>

use this

    <div class="benefit" ng-class="{'selected': pe.id}" ng-repeat="pe in policyEnhancementsArr | filter: {type:'optional'}" 
ng-model="pe.id">
              <div class="top">
                  <md-checkbox  class="blue"></md-checkbox>