Md-checkbox does not work with ng-click
I want to keep the position every time I change the checkbox:
<h1 class="md-display-2">Simple TODO ng app</h1> <h2 class="md-display-3"></h2> <div ng-include src="'todo/add.html'"></div> <div> <div layout="row"> <div flex class="md-title">Scope</div> <div flex="10" class="md-title">Till date</div> <div flex="10" class="md-title">Is reached?</div> <div flex="10" class="md-title"> <span ng-click="todoctrl.show_add()" class="material-icons controls">add</span> </div> </div> <div layout="row" ng-repeat="todo in todoctrl.todos track by $index"> <div flex ng-class="{true:'striked', false:'simple'}[todo.reached]">{{todo.name}}</div> <div flex="10"> {{todo.tillDate | date:'dd/MM/yyyy'}} </div> <div flex="10"> <md-checkbox ng-model="todo.reached" aria-label="Is reached" ng-click="todoctrl.changeState(todo.name)"></md-checkbox> </div> <div flex="10"> <span ng-click="todoctrl.deleteScope(todo.name)" class="material-icons controls">clear</span> </div> </div> </div> In this case, the controller is moved (I tried to debug the console log), but the value of the flag does not change until the page reloads. After a reboot, the flag value is displayed as expected. If I remove ng-click="todoctrl.changeState(todo.name)" , then the checkbox works fine, but the information is not sent to the controller.
This is my service:
(function() { 'use strict'; angular.module('app').service('ToDoService', ToDoService); ToDoService.$inject = ['JsonService']; function ToDoService(JsonService) { return { deleteScope : deleteScope, submitScope : submitScope, changeState : changeState, getData : getData } function getData() { var todos = JsonService.getData(); return todos; } function deleteScope(arr, scope) { arr.splice(findElementByScope(arr, scope), 1); JsonService.setData(arr); } function submitScope(arr, scope, tillDate) { var newTodo = {}; newTodo.name = scope; newTodo.reached = false; newTodo.tillDate = tillDate; arr.push(newTodo); JsonService.setData(arr); } function changeState(arr, scope) { console.log("Service change state for scope: " + scope); var todo = {}; var index = findElementByScope(arr, scope); todo = arr[index]; todo.reached = !todo.reached; JsonService.setData(arr); } function findElementByScope(arr, scope) { for (var i = arr.length; i--;) { if (arr[i].name == scope) { return i; } } return -1; } } })(); And this is the controller:
(function() { 'use strict'; angular.module('app').controller('ToDoController', ToDoController); function ToDoController(ToDoService) { var vm = this; vm.show_form = false; vm.todos = ToDoService.getData(); vm.scope = ''; vm.show_add = show_add; vm.submitScope = submitScope; vm.deleteScope = deleteScope; vm.changeState = changeState; function show_add() { console.log("Controller show add"); vm.show_form = true; } function submitScope() { ToDoService.submitScope(vm.todos, vm.scope, vm.tillDate); vm.show_form = false; vm.scope = ''; } function deleteScope(scope) { ToDoService.deleteScope(vm.todos, scope); } function changeState(scope) { ToDoService.changeState(vm.todos, scope); } } })(); +5