javascript - Dynamic controllers bound from scope -

i create "components" dynamically, based on data received backend. goal display parts of application, without using server side templating : instead of displaying components server-side, server sends json data containing components should displayed.

here i've got far :

var module = angular.module('testapp', []);  module.controller('ctrl1', ['$scope', function ($scope) {     $scope.test = "test 1"; }]) .controller('ctrl2', ['$scope', function ($scope) {     $scope.test = "test 2"; }]) .controller('componentscontroller', ['$scope', function ($scope) {     // json returned backend     $scope.components = [{         name: "wd1",         controller: "ctrl1",     }, {         name: "wd2",         controller: "ctrl2",     }];      $scope.test = "test"; }]); 

and view :

<div ng-app="testapp">     <div ng-controller="componentscontroller">         <div ng-repeat="component in components">             <p>{{component.name}} - {{component.controller}}</p>         </div>          <div ng-repeat="component in components">             <p ng-controller="component.controller">{{test}}</p>         </div>     </div> </div> 

however, following error :

error: argument 'component.controller' not function, got string

i tried write directive, assigning controller names during compile, done during compile, doesn't work binding...

here fiddle : http://jsfiddle.net/mathieu/btqa5/

just controllers name, not string:

function componentscontroller($scope) {     $scope.components = [{         name: "wd1",         controller: ctrl1,     }, {         name: "wd2",         controller: ctrl2,     }];      $scope.test = "test"; }