iOnic app - use $http.delete to delete object from local JSON file

I'm trying to build my first hybrid-app, i'm trying this with iOnic but also to AngularJS. Both are totally new for me :)

But so far I'm pretty happy with the results I made because I can find a lot of stuff if I'm stuck, but now I'm lost.

I'm trying to delete a favorite object I have saved in a local JSON file by clicking the remove button that I have placed behind every favorite item.

HTML template where the favorite items are listed by ng-repeat:

<ion-view view-title="My Favorites">
<ion-content>
    <ion-list>
      <ion-item ng-repeat="favo in favos" class="row">
        <i class="col icon ion-{{favo.gender}}"></i>
        <a href="#/app/myFavos/{{favo.id}}" class="button-clear col col-80">
            {{favo.name}}
        </a>
        <a class="button button-icon icon ion-trash-b col" ng-click="removeFavo(favo.id)">
        </a>
      </ion-item>
    </ion-list>
</ion-content>

Controller.js file:

angular.module('starter.controllers', [])

.controller('FavoslistCtrl', function($scope,  myFavos) {

    myFavos.getFavos(function (data) {
        console.log(data);
        $scope.favos = data;
    });

    $scope.removeFavo = function(data) {

        myFavos.deleteFavo(favo);

    }

})

.controller('FavoCtrl', function($scope, $stateParams, myFavos) {

  $scope.favo = myFavos.getFavos($stateParams, favoId);

  myFavos.getFavo(function ($stateParams, favoId, data) {
    $scope.favo = data;
  })

});

Service.js file:

angular.module('starter.services', [])

.factory('myFavos', function($ionicLoading, $http) {


  // Might use a resource here that returns a JSON array
  return {

    getFavos: function(callback) {
      $ionicLoading.show();
      $http.get('data/favos.json').success(function (data) {
        console.log("http GET success my favorites");

        console.log("return myFavos", data);
        $ionicLoading.hide();
        return callback(data);

      }).error(function (err) {
        $scope.error = 'Could not load favorites';
      });
    },

    deleteFavo: function(favo) {
      $http.delete('data/favos/' + favos.id + '.json').success(function (data) {
        return callback(data);
      });
    },


    getFavo: function(favoId) {
      for (var i = 0; i < favos.length; i++) {
        if (favos[i].id === parseInt(favoId)) {
          return favos[i];
        }
      }
      return null;
    }
  }

});

favos.json:

[
    {
        "id":1,"name":"Adam","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":2,"name":"Eva","description": "Lorem Ipsum", "gender": "female"
    },
    {
        "id":3,"name":"alex","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":4,"name":"adam","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":5,"name":"max","description": "Lorem Ipsum", "gender": "male"
    }
]

I have been trying it with the $http.delete function in the factory I made called 'myFavos' but I can't figure out how to delete the right object, with the right id.

If someone could help that would be awesome!