AngularJS: View is updated properly but not the model

Question

I have a problem when implementing a nested list in Angular: the view gets updated properly but, on the other side, the code is not updated on change.

I think it will be much clearer with the code:

  _this.categories = injections.map(function (category) {
    return {
      title: category.get('title'),
      object: category,
      criteria: category._criteria.map(function (oneCriteria) {
        return {
          object: oneCriteria,
          type: oneCriteria.get("type"),
          min: _this.range(oneCriteria.get("range")).min,
          max: _this.range(oneCriteria.get("range")).max,
          key: oneCriteria.get("key"),
          value: _this.range(oneCriteria.get("range")).min,
          defaultValue: _this.range(oneCriteria.get("range")).min,
          selected: false
        }
      })
    }
  });

  _this.category = _this.categories[0];

  _this.job = {
    title: '',
    description: '',
    salaryAmount: 0,
    salaryTimeUnit: _this.salaryTimeUnits[0],
    category: _this.category.object,
    criteria: _this.category.criteria,
    location: {latitude: 48.137004, longitude: 11.575928}
  };

So and, very quick here is my HTML:

    <div ng-repeat="category in controller.categories">
      <input type="radio" name="group" ng-value="category.object.get('title')" id="{{category.object.get('title')}}"
             ng-checked="controller.category == category" ng-click="controller.category = category">
      {{category.title}}
    </div>
    <br>
    Criteria:
    <div ng-repeat="criterium in controller.category.criteria">
      <div class="row vertical-align">
        <div class="col-xs-9">
      <span ng-click="criterium.selected = !criterium.selected"
            ng-class="['list-group-item', {active:criterium.selected == true}]">{{criterium.key}}</span>
        </div>
      </div>
    </div>

The problem is the following: the value are getting updated in the view (when you click on a radio button on the category, you see the corresponding criteria(s)). But the job is for one reason that I ignore not updated although it has the same reference as the HTML (a reference to this category.criteria).

Did I miss something?

Answer 1

controller.job.criteria is still just a reference to controller.categories[0]. Your code should successfully update controller.category to point at whichever category you clicked on, but that does not also update the reference in your job data structure.

What you want to do is make your ngClick event a bit more robust, i.e.:

<input type="radio" ng-click="controller.updateCategory(category)" />

and then in your js:

_this.updateCategory = function (category) {
  _this.category = category;
  _this.updateJob(category);
};

_this.updateJob = function (category) {
  _this.job.category = category.object;
  _this.job.criteria = category.criteria;
};

This will update the references in your job to match the new jazz.

I would, however, recommend leveraging ngModel and ngChange in your radios instead. Like:

<input type="radio" ng-model="controller.category" ng-value="category" ng-change="updateJob(category)" /> {{category.title}}