How to set the ng-controller value from an array in the model?

Question

I'm trying to set the name of the ng-controller, through looping an array. However, it seems it's not working. This is the code I have so far:

JS:

var app = angular.module('xmil', ['ngRoute']);

app.controller('mainController', ["$scope", function ($scope) {
    $scope.tabsArray = [{
            numero: '1',
            ControllerName: 'GeneralController',
            grupo: 'General'
        },
        {
            numero: '2',
            ControllerName: 'ParametrosController',
            grupo: 'CEMS'
        },
        {
            numero: '3',
            ControllerName: 'CilindrosController',
            grupo: 'Cilindros'
        },
        {
            numero: '4',
            ControllerName: 'EquiposController',
            grupo: 'Equipos'
        },
        {
            numero: '5',
            ControllerName: 'DPController',
            grupo: 'DP'
        },
        {
            numero: '6',
            ControllerName: 'MPController',
            grupo: 'MP'
        },
    ];
}]);

HTML

<div class="card" ng-repeat="tab in tabsArray">
  <div [ng-controller]={{tab.ControllerName}}></div>
</div>

The purpose of this is to make the HTML code smaller.

How can I achieve to set the values of tab.ControllerName to the ng-controller of each div created?