Change value inside ng-repeat loop with ng-click

Question

I want to change the value of an element inside an ng-repeat loop with a function.

This, for example, will not work.

HTML

<ul class="unstyled">
  <li ng-repeat="todo in todoList.todos">
      <span>{{todo.name}}</span>
      <button ng-click="example(todo)">Change me</button>
  </li>
</ul>

Js

$scope.example = function(v) {
  v.name = 'i am different now';
};

Full example

http://plnkr.co/edit/kobMJCsj4bvk02sveGdG

Answer 1

When using a template, controllerAsyou must use an alias controllerwhen accessing any variable from a controller function. But this should be limited by thiscontext controller.

<button ng-click="todoList.example(todo)">Click me</button>

Demo here

Extended

this factory. this , , this, , this, this , .

angular.module('todoApp', [])
  .controller('TodoListController', function() {
    var toList = this;
    toList.todos = [{name:'test 1'},{name:'test 2'}];
    toList.example = function(v) {
      v.name = 'ora bene';
    };
  });