Angular Js - Example - List Item using ng-repeat

Angular Js - Example Directive: ng-repeat Repeat the json data

HTML

<h3>FIFA Mactch Summary:</h3>
<div ng-app='app' ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="(country,goals) in items">{{country}}: {{goals}}
      <div class="filter-row" delete-filter>
        <div class="form-group>
        <div class=" delete-filter " ng-click="deleteFilter() "><input type='button' value='delete'></div>
    </div>
</div>
        </li>
    </ul>
</div>

JavaScript

var items = {
  "India": "2",
  "England": "2",
  "Brazil": "3",
  "UK": "1",
  "USA": "3",
  "Syria": "2"
};

var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
  $scope.items = items;
});

app.directive('deleteFilter', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {

      // Scope function to delete a filter row from the DOM
      scope.deleteFilter = function() {
        console.log("Deleting");
        // Remove the directive element
        element.remove();
      };
    }
  };
});