strictdi error when trying to use angular-d3plus in AngularJS app

Question

When I run angular-d3plus independently (please note angular-d3plus also uses 'use strict' directive in js), it works well. But when I tried to make it part of my existing angularJS application (generated through JHipster) I see strictdi error in developer console of chrome as soon as it attempts to draw view where angular-d3plus directive is used;

angular.js:13920 Error: [$injector:strictdi] controller is not using explicit annotation and cannot be invoked in strict mode

I followed below simple steps for this integration (after bower install and adding d3 related js files in my index.html)

I added 'angular-d3plus' module in my app

angular
    .module('myapp', [
        ...,
        'angular-d3plus',
        ...
    ])
    .run(run);

My controller code is;

(function() {
'use strict';

angular
    .module('myapp')
    .controller('myappController', myappController);
myappController.$inject = ['$translate', '$timeout'];

function myappController ($translate, $timeout) {
    var vm = this;
    vm.charttype="box";

    vm.base_data = [
      {"year": 1991, "name":"alpha", "value": 15, "group": "black"},
      {"year": 1991, "name":"beta", "value": -10, "group": "black"},
      {"year": 1991, "name":"gamma", "value": 5, "group": "black"}
    ];
}
})();

my angular-d3plus directive in my view is (for above controller);

<d3plus-box data="vm.base_data" id='name' y="value" x="year" ng-show="vm.charttype=='box'" ></d3plus-box>
</div>

when I take out above line of code, everything else works perfectly fine. I have tried this post to take out controller code from directive (editing angular-d3plus js) but of no use. I also attempted and observed no error when changed angularjs version of angular-d3plus demo to 1.5.8 (same as my application). Any help would be really appreciated!

EDIT1: edited directive in view as per @mariomol suggestion.

Answer 1

To solve this, I had to take out controller function from directive

d3plusBox.$inject = ["angularD3plusUtils"];
function d3plusBox(angularD3plusUtils) {
    console.log('d3plusBox entered');
    return {
        restrict: 'AE',
        scope: angularD3plusUtils.scope({
            data: '=',
            id: '@',
            x: '@',
            y: '@',
            size: '@?'
        }),
        template: angularD3plusUtils.template,
        link: angularD3plusUtils.link,
        controller: d3PlusBoxContr
    };
}

d3PlusBoxContr.$inject = ["angularD3plusUtils", "$scope", "$element"]

function d3PlusBoxContr(angularD3plusUtils, $scope, $element) {
    angularD3plusUtils.controller($scope, $element, 'box');
}