I attempted to eliminate the data utilizing indexOf in AngularJS. Unfortunately, the remove function isn't functioning properly. Please guide me on identifying the mistake I may be making.
JavaScript:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$http', function($scope, $http){
$http.get('data.json').success(function(data){
$scope.countries = data;
});
$scope.remove = function(jai) {
var i = $scope.countires.indexOf(jai);
$scope.countires.splice(i, 1);
};
}]);
HTML
<!DOCTYPE html>
<html lang="en>>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="p02.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat='country in countries'>{{country.name}} - {{country.population}} <a href="" ng-click="remove()">×</a></li>
</ul>
</body>
</html>
JSON
[
{
"name": "WORLD",
"population": 6916183000
},
{
"name": "More developed regions",
"population": 1240935000
},
{
"name": "Less developed regions",
"population": 5675249000
},
{
"name": "Least developed countries",
"population": 838807000
}]