AngularJS passing Data between controllers failure

As mentioned in my other posts, i am still new to AngularJS and I am having quite a bit of difficulties understanding its' ins and outs.

I have reached a blocking point where I am trying to pass data between a controller which stores a list of objects and another where the user can edit individual objects within a different view.

I have tried using my own factory for it, however if i reference the service within the index.html file (it's a single page application) I get errors regarding the state of my NavigationController which does not use the service in question.

My Factory code is below:

var app = angular.module('MyAppName',[]);

app.factory('CharacterData', function() {
    var data = {
        Name: '',
        Description: '',
        TotalExperience: 0,
        RemainingExperience: 0
    }

    return {
        getName: function() {
            return data.Name;
        },

        setName: function(name) {
            data.Name = name;
        },

        getDescription: function() {
            return data.Description;
        },

        setDescription: function(description) {
            data.Description = description;
        },

        getTotalExperience: function() {
            return data.TotalExperience;
        },

        setTotalExperience: function(totalxp) {
            data.TotalExperience = totalxp;
        },

        getRemainingExperience: function() {
            return data.RemainingExperience;
        },

        setRemainingExperience: function(exp) {
            data.RemainingExperience = exp;
        }
    };
});

I have injected this factory in both controllers that need it (CharacterListController and CharacterEditController), code below:

(function(){
    angular.module('MyAppName')
        .controller('CharacterEditController', ['$scope', '$state', '$http', '$location', function ($scope, $state, $http, $location, CharacterData){

            /**
             *
             */
            $scope.readCharacter = function() {
                $scope.currentCharacter.name = CharacterData.getName();
                $scope.currentCharacter.description = CharacterData.getDescription();
                $scope.currentCharacter.totalExperience = CharacterData.getTotalExperience();
                $scope.currentCharacter.remainingExperience = CharacterData.getRemainingExperience();
            }

...
}]);
}());

and the listing controller from where the character in question is passed:

(function(){
    angular.module('TimeWaste')
        .controller('CharacterListController',['$scope', '$state', '$http','$location', function($scope, $state, $http, $location, CharacterData){

.... more functions ... 

            $scope.updateCurrentCharacter = function(req, res) {

                CharacterData.setName($scope.character.name);
                CharacterData.setDescription($scope.character.description);
                CharacterData.setTotalExperience($scope.character.totalExperience);
                CharacterData.setRemainingExperience($scope.character.remainingExperience);

                $location.path('/edit-character');
            }

 }]);

}());

What I do not understand is what does the NavigationController have to do anything with passing data. I have referenced my service like so:

I am not understanding exactly how it works or why this problem occurs. I've been following tutorials mostly for the things i have been doing but as I said I am still in my MEAN Stack/Angular ABCs

Any help would be appreciated.