Where to store interface states?

Question

Angular

Good afternoon!
Let's say a list of some objects is displayed on the page, let it be comments. Next to each comment there is a link "Edit", when you click on it, an inline (comment text is replaced by textarea) comment editing form appears. That is, each comment has a state: show - the comment is simply displayed, edit - the comment is being edited (the text of the comment is hidden, but the edit form is displayed). Clicking on the link toggles this state, and displaying the form/text of the comment depends on `comment.state`. Where is this state stored? After all, we don’t have models, and storing it in a model is somehow not very good. To receive comments, ngResource is used - does it mean that you need to extend the resource with methods to work with interface states? Now I do this:

var Comment = $resource(...);
angular.extend(Comment.prototype, {
  state: 'show',
  edit() {
    this.state = 'edit';
  },
  show() {
    this.state = 'show';
  },
  isShown() {
    return this.state === 'show';
  },
  isEdited() {
    return this.state === 'edit';
  }
});

But something does not like this approach. Store in the controller (after all, the controller in Angular is the ViewModel)? Xs, how to do this, because each comment should know about itself, in what state it is.
How do you solve such a problem and where do you store interface states?

Answer 1

I would separate data and state. Framework, for a second, MVVM.
Your resource is specifically a Model. And the controller that you bind to the View is the View Model.
Here in the View Model and store the state.

{
  controller: ListController,
  controllerAs: 'itemsList'
}

<div ng-repeat="item in itemsList.data">
  <button ng-disabled="itemList.editing[item.id]" 
          ng-click="itemList.toggleEditMode(item)">Edit</button>  
</div>

Answer 2

As there are no models .. Of course, I don’t need this .. but let's say there is a list of countries that can be edited (inline) too ... it looks something like this.

<form name="countryForm">
                    <div class="input-group">
                        <input autocomplete="off" name="newCountry" ng-model="newCountry" class="form-control" placeholder="Новая страна" type="text" my-enter="addCountry()">
                        <a href="" ng-click="addCountry()" class="input-group-addon"><i class="glyphicon-plus-sign glyphicon"></i></a>
                    </div>
                    <div ng-messages="countryForm.newCountry.$error" style="color:maroon" role="alert">
                        <div ng-message="country">Такое название уже имееться</div>
                    </div>
                </form>

something like this in the controller

$scope.$watch('data.countries', function(newVal, oldVal) {
            if (angular.isDefined(oldVal) && (newVal.length > oldVal.length))
            {
                angular.forEach(newVal, function(val, key) {
                    if (angular.isUndefined(oldVal[key]) || val.name !== oldVal[key].name) {
                        SettingsService.saveCountry(newVal[key]).then(function(data)
                        {
                            if (data.success == true) {
                                if (newVal[key].id === null) {
                                    newVal[key].id = data.id;
                                    $scope.newCountry = null;
                                    $scope.countryForm.newCountry.$setValidity("country", true);
                                }
                                ngNotify.set('Страна успешно сохранена!');
                            }
                            else {
                                ngNotify.set('Ошибка при сохранении: ' + data.error, 'error');
                            }
                        });
                    }
                });
            }
        }, true);