How to call the execution of a function after changing the object in $scope?

Question

Angular

Hello. There is a loop in which I display information:

<ul class="list-group"
  ng-init="curMarks=getTaskVotesModalInfo(task)"
>
  <li ng-repeat="info in curMarks"
       class="list-group-item"
  >
    <span>{{info.worker}}</span>
    <span class="badge">
      {{info.mark}}
    </span>
  </li>
</ul>

The problem is that when the task (an element of the $scope.Tasks array) is changed, getTaskVotesModalInfo() is not called and info.mark is not recalculated accordingly.
If I display everything not through the getTaskVotesModalInfo() function, but throw all the logic into the view, then when the task changes, everything is recalculated, but somehow I don’t like this option.
Please tell me how best to get out of this situation?

Answer 1

Now, if it would be possible to build a model in the controller, and the view would only draw it ...

<ul class="list-group">
  <li ng-repeat="info in $ctrl.curMarks" class="list-group-item">
    <span>{{info.worker}}</span>
    <span class="badge">
      {{info.mark}}
    </span>
  </li>
</ul>

function MyCtrl() {
  var vm = this;
  vm.curMarks = null;

  function changeTask() {
   task = [{worker: 'Sergey', mark: '@Neversmille'}];
    vm.curMarks = getTaskVotesModalInfo(task);
  }

  function init() {
    vm.curMarks = getTaskVotesModalInfo(task);
  }

  init();
}

There is also a good practice not to use a scope, but to use a controller