我无法从控制器AngularJS获取数据

Question

我想制作聊天应用。所以当我发送消息时你可以听到流行音乐。所以我有两个指令，一个用于我的消息，另一个用于模拟。模拟只工作一次然后停止。我无法从$scope.data到指令myDirective获取对象。我几乎尝试了所有的东西。有没有解决方案？

var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider,$locationProvider) {

    //angular-ui-router
    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('home',{
            url:'/',
            views:{
                '':{
                    templateUrl:'../ChatApp/views/chatapp.html'
                }
            }
        })
        .state('login',{
            url:'/login',
            templateUrl:'../ChatApp/views/login.html',
            controller: 'LoginController'
        });
});

app.controller('MessageController', function($scope,$filter, $http,$state,$timeout,$compile,$interval) {

    $scope.randomNumber = Math.floor(Math.random()*(2-0+1)+0);
    $scope.data = [];
    $scope.name = localStorage.getItem('Name');
    console.log(localStorage);
    console.log(localStorage.getItem('Name'));
    $scope.sendedMessage = "";

    $scope.data1 = [$scope.name,$scope.sendedMessage,$scope.date];


    //geting data from json
    $scope.getData = function () {
        $http.get('../ChatApp/data/data.json')
            .then(function(response) {
                $scope.data =response.data.messages;
                console.log($scope.data);
            });
    };

    //logout button
    $scope.logout = function () {
        localStorage.clear();
        console.log(localStorage);
    };


    //function for rocket button
    $scope.sendMessage = function (message) {
            $scope.date = new Date();
            $scope.date = $filter('date')(new Date(), 'HH:mm:ss');
            $scope.message = null;
            $scope.sendedMessage = message;
            var audio = new Audio('../ChatApp/sounds/videoplayback');
            audio.play();
    };

    //simple autentification
    $scope.login = function () {
        if(localStorage.getItem('Name') == null){
            $state.go('login');
        }
    };

    (function() {
        $scope.getData();
        $scope.login();
    })();

});

app.controller('LoginController', function($scope, $state) {
    //simple login
    $scope.login = function (name) {

        if(name == ""){
            alert('Write your name! ');
        }
        else
        {
            localStorage.setItem('Name', $scope.name);

            $state.go('home');
        }
    }
});

app.$inject = ['$scope'];

//When you click button rocket, you are adding this to html
app.directive("boxCreator", function($compile){
    return{
        restrict: 'A',
        link: function(scope , element){
            if(scope.sendedMessage != undefined && scope.sendedMessage!=null){
                element.bind("click", function(e){

                    var childNode = $compile('<li class="self"><div class="msg"><div class="user">{{:: name}}</div><p>{{:: sendedMessage}}</p><time>{{:: date}}</time></div></li>')(scope);
                    angular.element( document.querySelector('#chat')).append(childNode);

                });
            }
            //doStuff literally does nothing
            scope.doStuff = function(){
                alert('hey');
            }
        }
    }
});


app.directive('myDirective', function() {
    return  {
        compile: function(element, attr,$compile) {
            var newElement = angular.element('<li class="other"><div class="msg"><div class="user">{{data[randomNumber].name}}</div><p>{{data[randomNumber].message}}</p><time>{{data[randomNumber].date}}</time></div></li>');
            element.append(newElement);
            var audio = new Audio('../ChatApp/sounds/videoplayback');
            audio.play();

           return  function(scope, element, attr) {
               setInterval(function () {

                   scope.$watch('data', function (data) {
                       console.log("fff", scope.data);
                   });
                   var newElement = angular.element('<li class="other"><div class="msg"><div class="user">{{name}}</div><p>{{scope.data[0].message}}</p><time>{{data[0].date}}</time></div></li>');
                   element.append(newElement);
                   var audio = new Audio('../ChatApp/sounds/videoplayback');
                   audio.play();
               },5000);
            }
        }
    }
});


});