AngularJS: why can't I inject html in my view?

Question

I'm very very new to AngularJS and I saw some solutions on SO, but, due to my inexperience, I can't figure out how to achieve my task with those solutions, so I'm asking for help, please bear with me. Basically, as my question says, I need to inject and render some HTML in my view. Here is my code:

HTML

<tabset panel-tabs="true" panel-class="panel-grape" ng-controller="MainController" data-heading="OTHER NEWS">
   <div ng-repeat="tab in baseString" ng-bind-html-unsafe="tab">

    </div>

</tabset>

and my part of the CONTROLLER:

function createBase() {
    for (var i = 0; i < $scope.news.news[0].posizioni.length; i++) {
        // $scope.tabsName[i] = $scope.news.news[0].posizioni[i][i];
    $scope.baseString[i] =["<tab heading='" + $scope.news.news[0].posizioni[i][i] + "' ng-controller='MainController'><div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div class='col-xs-12 col-sm-6 col-md-6' id='colonaSx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div id='paginaz"+ $scope.news.news[0].posizioni[i][i] +"'></div></tab>"];
    }
}

I need that tabsName remain an array.

Over the last few hours, I have tried several solutions, but so far I'm not able to obtain any results...please can anyone help me out? Thanks a lot in advance.

EDIT for better understanding the number of tab header depends on the results from a json:

PORTION OF JSON:

    {
   "news":[
      {
         "posizioni":[
            {
               "0":"allNews"
            },
            {
               "1":"SecondTab"
            }
         ]
       }
]
}

Answer 1

In Angular, HTML in your controller is a red flag; it's the wrong place.

Instead, use ng-repeat , close to what you tried, to build the HTML, here's a quick example .

In your controller, simply keep the data :

$scope.data = {
    "news": [
        {"posizioni": [
            {"0": "allNews"},
            {"1": "SecondTab"},
        ]}
    ]
};

In the HTML, your ng-repeat can look like this; because of the JSON structure above it gets a little messy, but it gets the job done:

<tab ng-repeat="(key, name) in data['news'][0]['posizioni']" heading="{{ tab.key }}" ng-click="selectTab($event, key, name)">{{ name[key] }}</tab>

In the fiddle I added a click handler to show how you can react to the click that happened in the TabController to update data in the ContentController through a Service. Note, the ContentService contains an array of data, but you could update this to dynamically request the content from the upstream server:

$scope.selectTab = function (event, key, name) {
    ContentService.setContent(key);
}

Answer 2

just move html string from your controller to your html like

<tabset panel-tabs="true" panel-class="panel-grape" ng-controller="MainController" data-heading="OTHER NEWS">
    <tab  ng-repeat="tab in news.news[0]" heading='{{tab[$index]}}' ng-controller='MainController'>
        <div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx{{tab[$index]}}'></div>
        <div class='col-xs-12 col-sm-6 col-md-6' id='colonaSx{{tab[$index]}}'></div>
        <div id='paginaz{{tab[$index]}}'></div>
    </tab>
</tabset>