Wstrzykiwanie kodu html w angularjs

Witam mam taki problem, chcę wkleić do widgetu wykres(korzystam z nvD3Directives. Gdy wklejam go po prostu do widgetu to jest ok i się wyświetla:

<div class="panel-body resize" style="width: {{item.width}}px; height: {{item.height}}px">
                <div ng-bind-html="chooseChart($index)"></div>
                <nvd3-line-chart
                        data="exampleData"
                        id="exampleId"
                        showXAxis="true"
                        showYAxis="true"
                        tooltips="true"
                        interactive="true"
                        objectequality="true"
                        margin="{left:50,top:50,bottom:50,right:50}"
                        >
                    <svg></svg>
                </nvd3-line-chart>
            </div>

Jednak w moim przypadku każdy widget ma wyświetlać dany wykres w zależności od danych w tabeli:

$scope.items=[
        {title: "pierwszy", width: 400, height: 400, type: "linear"},
        {title: "drugi", width: 400, height: 400, type: "column"},
        {title: "trzeci", width: 400, height: 400, type: "bar"},
        {title: "czwarty", width: 400, height: 400, type: "point"}
    ];

I funkcja, która "wstrzkuje" daną dyrektywe

$scope.chooseChart=function($index)
        {
            if($scope.items[$index].type === "linear")
            {
                return $sce.trustAsHtml('<nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true" tooltips="true" interactive="true">  </nvd3-line-chart>');
            }
            else if($scope.items[$index].type === "column")
            {
                return $sce.trustAsHtml("Kolumnowy");
            }
        }

Tutaj ją "wstrzykuje"

<div ng-bind-html="chooseChart($index)"></div>

Jednak, w tym wypadku wykres się nie wyświetla, mimo tego, że kod html został prawidłowo dodany. Czy ktoś może wie dlaczego i jak temu zaradzić?

https://jsfiddle.net/bkeb19fk/

brakowało

$scope.$index = 0;