Undefined scope variable in AngularJS app

Question

I am trying to set a Boolean property on an element in my array object, which I have in my scope.

In the code given below, when I try to set tasks[id].deleted = true, I get the following error.

angular.js:12798 TypeError: Cannot set property 'deleted' of undefined
at Scope.$scope.delete (main.js:54)

Where am I going wrong?

My whole code file is:

angular.module('ngMaterialTaskListApp')
.controller('MainCtrl', function ($scope, $mdDialog, TaskService) {

    // Model from which View populates data
    $scope.tasks = [];
    console.log($scope.tasks);

    $scope.showAddDialog = function (ev) {
        $mdDialog.show({
            controller: DialogController,
            templateUrl: '../views/add-dialog-template.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true,
            fullscreen: true, //Only for xs and sm screen sizes
            locals: { //For DialogController, as tasks
                tasks: $scope.tasks
            }
        });
    };
    /*----------- Function to delete items onClick of delete icon -----------*/
    $scope.delete = function (id) {
        console.log($scope.tasks[id]);
        console.log(id);
        // console.log($scope.tasks[id].name);
        $scope.tasks[id].deleted = true;
    };

    /*----------- DialogController function -----------*/
    function DialogController($scope, $mdDialog, tasks) {
        $scope.task = {};
        $scope.hide = function () {
            $mdDialog.hide();
            //TODO Add a message as to what happened
        };
        $scope.cancel = function () {
            $mdDialog.cancel();
            //TODO Add a message as to what happened
        };
        /*----------- Method show the add dialog -----------*/
        $scope.addData = function () {
            if (null !== $scope.task.name && null !== $scope.task.description) {
                /*----------- Using moment.js to parse date and time -----------*/
                $scope.task.date = moment($scope.task.date, '').format('DD MMM YYYY');
                $scope.task.time = moment($scope.task.time, '').format('h:mm a');
                $scope.task.done = false; // Every new task is pending!
                $scope.task.deleted = false; // Every new task exists!
                var GlobalID = Date.now();
                console.log(GlobalID);
                $scope.task.id = GlobalID;
                /*----------- Performing http POST -----------*/
                TaskService.postTask($scope.task);
                /*----------- Pushing to tasks object in $scope of MainCtrl -----------*/
                // Have to update tasks again
                tasks.push($scope.task);
                $scope.hide();
                console.log(tasks); //DEBUGGING
            } else {
                //TODO ADD INVALID/NULL DATA WARNING
            }
        };
    };
    // DEPRECATED - USED FOR DATA WHEN SERVER NOT AVAILABLE
    TaskService.getTasks().then(function (response) {
        $scope.tasks = response.data.tasks;
    }, function (error) {
        console.log(error + "This");
    });
    //USING THIS TO GET DATA FROM SERVER
    TaskService.getAllTasks().then(function (response) {
        // console.log(response.data);
        $scope.tasks = response.data;
        console.log($scope.tasks);
    });
});

Answer 1

How is your html? I bet is like this inside a button in ng-repeat:

ng-click="delete(task.id)"

Try putting like this:

ng-click="delete($index)"