Javascript 在AngularJS之间共享数据

我一直在尝试一些AngularJS教程，并尝试创建一个简单的网站

我有一个指令，它创建了一个侧导航栏，并根据存储在服务器上的一些json数据填充项目列表。已填充名称列表，但没有问题

问题是，我需要在多个控制器之间共享该名称，但我没有这样做的运气

My app.js包含：

var app = angular.module("Myapp", ['ui.bootstrap']);

app.service('nameService', function() {
    var name = "";

    this.setName = function(name) {
        this.name = name;
    }

    this.getName = function() {
        return name;
    }
});

app.directive("sideBar",  ['$http', function($http) {
    return {
        restrict: 'E',
        templateUrl: "views/sidebar.html",

        controller: function($scope) {

            $scope.updateName = function(name) {
                alert(name);
            };  

            $http.get('../data/names.json').
                success(function(data, status, headers, config) {
                    $scope.names = data;
            }).error(function(data, status, headers, config) { });          
        }
    };
}]);

从我所读到的内容来看，您应该能够将服务作为依赖项注入，如下所示：

app.directive("sideBar",  ['$http', 'nameService', function($http, nameService) {

然后我应该能够像这样更新值：

 $scope.updateName = function(name) {
     nameService.setName(name);
 };

但是，当我尝试注入依赖项时，它会破坏整个指令，侧栏将不再加载

---

我一直在绞尽脑汁想弄清楚它为什么会在运气不好的情况下断裂。我有什么遗漏吗？还是我的做法完全错了？

先做一些故障预防：在index.html中，是否在指令javascript之前加载服务javascript？如果你这样做了，它就不会违反指令。随时通知我们！一般做法是correct@GabrielPires这些都包含在我的app.js文件中。我还没有把东西拆开。Index.html包含该应用程序。js@GabrielPires在复制和粘贴您的JSFIDLE代码之后，它就工作了。。。我不知道为什么它本来就不起作用，但现在起作用了，不管怎样，谢谢你的时间！好吧，当我们不明白为什么有些东西不起作用时，这是不好的，但总要看到好的一面，它现在起作用了=