Why Angular js Service does not work?

Question

I wrote script to test passing variables between controllers, so i define a service and declare variable on it getContents, then pass it to next controller personController, but something goes wrong, this is my script:

 <script>

    angular.module("app", []).service("personService", function () {
       var getContents = {};
    })
    .controller("personController", function ($http, $scope, personService) {

        $scope.GetContents = function () {
            $http.get("/Home/Get").success(function (data) {
                debugger;
                personService.getContents = data;
                $scope.Persons = data;
            });
        }

        $scope.Save = function () {

            $http.post("AddPerson",$scope.model).success(function (status) {
                debugger;
                console.log('status =', status);
                $scope.ShowForm = false;
                $scope.GetContent();
            });
        }

        $scope.AddPerson = function () {
            $scope.ShowForm = true;
            $scope.model = {};
        }
    });
</script>

what is wrong?

NOTE: when i remove the Service, the controller work properly and get data from /Home/Get.

Edit: this is my edit:

<script>

    angular.module("app", []).service("personService", function () {

        var Content = {};
        return {
            getContent: function () {
                return Content;
            },
            setContent: function (value) {
                Content = value;
            }
        };


    })

    .controller("personController", function ($http, $scope, personService) {

        $scope.GetContents = function () {
            debugger;
            $http.get("/Home/Get").success(function (data) {
                debugger;
                console.log("successData :", data); //console did not log         
                personService.setContent(data);
                console.log("ServiceData:",personService.getContent()) //console did not log too
                $scope.Persons = data;
            });
        }

        $scope.AddPerson = function () {
            $scope.ShowForm = true;
            $scope.model = {};
        }
    });

 </script>

and this is my html:(for more help)

<div ng-app="app">
<div class="container" ng-controller="personController" ng-init=" GetContent()">
    <div ng-show="!ShowForm">

        <table class="table">
            <thead>
                <tr>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="person in Persons">
                    <td>{{person.Name}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

Answer 1

you have to return service

service

angular.module("app", []).service("personService", function () {
    var content = {};

    var person = {
        setContent :function(item){
            content = item;
        }
        getContent : function(){
            return content;
        };
    };

    return person;
})

Controller

.controller("personController", function ($http, $scope, personService) {

    $scope.GetContents = function () {
        $http.get("/Home/Get").success(function (data) {
            debugger;
            personService.setContent(data); // set content to service..
            $scope.Persons = data;
        });
    }

    $scope.Save = function () {

        $http.post("AddPerson",$scope.model).success(function (status) {
            debugger;
            console.log('status =', status);
            $scope.ShowForm = false;
            personService.getContent(); // get content from service..
        });
    }

    $scope.AddPerson = function () {
        $scope.ShowForm = true;
        $scope.model = {};
    }

define personService.getContent() to $scope variable to display on view page.

$scope.content = personService.getContent();