angularjs - nvd3-angularjs のコントローラーから $scope.api にアクセスできません

Question

Angular-JS で NVD3 ボックス チャートを使用しようとしています。コントローラーでデータが変更されたときにチャートを更新したいと考えています。

チャートを更新するには、次の行を使用する必要があります

$scope.api.updateWithData($scope.data);

ただし、私のコントローラーでは、$scope.apiにアクセスできません

ただし、 Plunker-ExampleまたはQuestionにあるアプリとコントローラーの定義方法に従うと、完全に機能します。

問題は、アプリとコントローラーを定義する方法にあると思います。

以下の方法で動作させたいと思います。ここで私を助けてくれませんか

HTML-DIV

<div ng-controller="MyController">    

<nvd3 options="options" data="data" api="api" config="{refreshDataOnly: true}"> </nvd3>
</div>

アプリ定義

(function () {
'use strict';
angular
    .module('app', ['ngRoute', 'ngCookies', 'smart-table', 'ui.bootstrap', 'ngFileUpload', 'angular-img-cropper','nvd3'])
    .config(config)
    .run(run);

config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
}

run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {
}

})();

コントローラー定義

(function () {
'use strict';
angular
    .module('app')
    .controller('MyController', MyController);

MyController.$inject = ['UserService', '$rootScope', '$scope', '$cookieStore', 'AuthenticationService'];
function MyController(UserService, $rootScope, $scope, $cookieStore, AuthenticationService) {       
var vm = this;      
$scope.data = [ ];      

    // D3 JS Data
    $scope.options = {
        chart: {
            type: 'boxPlotChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 60,
                left: 40
            },
            color:['darkblue', 'darkorange', 'green', 'darkred', 'darkviolet'],
            x: function(d){return d.label;},
            // y: function(d){return d.values.Q3;},
            useInteractiveGuideline: true,
            transitionDuration:500, 
            maxBoxWidth: 75,
            yDomain: [0, 300]
        }
    };

    $scope.btnDisplayData = function() {

        // $scope.getOpParamsAcrossSites();
        $scope.data = [
        {
        label: "Sample A",
        values: { 
            Q1: 180,
            Q2: 200,
            Q3: 250,
            whisker_low: 115,
            whisker_high: 400,
            outliers: [50, 100, 425]
            }
        },
        {
        label: "Sample B",
        values: {
            Q1: 180,
            Q2: 200,
            Q3: 250,
            whisker_low: 115,
            whisker_high: 400,
            outliers: [50, 100, 425]
            }
        }
        ];
        $scope.api.updateWithData($scope.data);
        $scope.$apply();            
    }       
}})();