단일 컨트롤러에서 각도 여러 동일한 지시문

일부 데이터를 시각화하기 위해 Highcharts를 사용하는 웹 페이지를 만들고 있습니다. 재사용 할 수 있도록 지시문에 원하는 차트를 래핑했습니다.

'use strict';
angular.module('statisticsApp')
  .directive('cleanbarchart', function () {
    scope:{
      localdata:'@'
    }
    return {
      template: '<div></div>',
      restrict: 'E',
      link: function postLink(scope, element, iAttrs) {
          // console.log(iAttrs);
          // console.log(iAttrs);
          // var attrs = JSON.parse(iAttrs.id);
          var attrs = iAttrs;
          element.highcharts({
            chart: {
              type: 'column',
              width:1000,
              zoomType: 'x'
            },
            title: {
              text: scope.localdata[attrs.id].title //title
            },
            xAxis: {
              categories: scope.localdata[attrs.id].categories, crosshair: true

            },
            yAxis: {
              min: 0
            },
            tooltip: {
  //            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  //            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  //            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
  //            footerFormat: '</table>',
  //            shared: true,
  //            useHTML: true
            },
            plotOptions: {
  //            column: {
  //            pointPadding: 0.2,
  //            borderWidth: 0
  //          }
            },

            series: scope.localdata[attrs.id].series
          })
      }
    };
  });

내 컨트롤러에서 서비스와 콜백 함수를 사용하여 localdata를 채 웁니다.

angular.module('statisticsApp')
  .controller('AboutCtrl', function ($scope, HttpDataService) {

     function done(data){

       console.log(data);
       $scope.localdata['test2'] = data; //HttpDataService.getUniqueUsers() ;
     }

     $scope.localdata = {} ;
     HttpDataService.getUniqueUsers(done) ;
});

다음과 같은 서비스로 :

angular.module('statisticsApp')
  .service('HttpDataService', function($http, $q, baseRestPath) {
    // AngularJS will instantiate a singleton by calling "new" on this function
    return {
      getUniqueUsers: function (callback, periodicity) {
        var url = baseRestPath + '/sessions/uniqueUsers';
        console.log(url);
        var dates = [];
        var values = [];

        $http.get(url).then(
          function successCallback(response){
            var data = response.data;
            data.forEach(function(dataLine) {
              dates.push(dataLine[1]);
              values.push(dataLine[0]);
            })
            console.log(values);
            callback({title: 'Unique Users', categories:dates, 'series': [ {name: 'Alltime', data:values} ]  });
        //    return {'title': "Unique Users", 'categories':dates, 'series': [ {name: "Alltime", data:values} ]  }
          },function errorCallBack(response){
            //do nothing
          }
        );


//      return {'title': "Unique Users", 'categories':dates, 'series': [ {name: "Alltime", data:values} ]  }
      }
    }
  });

마지막으로 내 HTML에서 다음 코드를 사용하여 지시문을 호출합니다.

<cleanbarchart id="test2"></cleanbarchart>

내 서비스가 작동하고 데이터를 올바르게 반환한다고 확신하지만 오류가 발생합니다.

정의되지 않은 '제목'속성을 읽을 수 없습니다.

$ http가 작동하는 비동기 방식과 관련이 있다고 생각하지만 요소를 래핑하여 시도한 scope.localdata 또는 scope.localdata [attrs.id]에서 지시문을 감시하는 방법을 알 수 없습니다. 감시 블록의 .highcharts

link: function postLink(scope, element, iAttrs) {
  scope.$watch('localdata',function(){
    element.highcharts.....
  }
}

or 

link: function postLink(scope, element, iAttrs) {
  scope.$watch('localdata[' + attrs.id + ']',function(){
    element.highcharts.....
  }
}

모든 도움을 주셔서 감사합니다.