Remove JSON object in Angular

Question

I have a file (courses.json) that I want to remove courses from when I click on the 'x' next to the course-name. I am very much a beginner at this, and I can't really get it to work.I have no problem reading from the file, but nothing happens when I click the 'x'. Very grateful for all the help I can get!

This is my code:

var app = angular.module('myApp', []);
app.controller('courses', function($scope, $http) {
    $http.get("courses.json").success(function(data) {
        $scope.courses = data.kurser;
    });
});

function courses($scope, courses) {
    $scope.deleteItem = function (key) {
        delete $scope.courses[key];
    }
}

HTML:

<div ng-app="myApp">
    <ul ng-controller="courses">
        <li ng-repeat="(key, value) in courses" id="course-{{value.courseId}}">
            <a href="#" class="courseIcon">{{value.courseName}}</a>  <a ng-click="deleteItem(key)">x</a>
        </li>
    </ul>
</div>

Answer 1

You should define deleteItem method in the same controller where you load data, otherwise courses function is not linked to the application anyhow:

app.controller('courses', function($scope, $http) {
    $http.get("courses.json").success(function(data) {
        $scope.courses = data.kurser;
    });

    $scope.deleteItem = function (key) {
        delete $scope.courses[key];
    }
});