AngularJS installs ng controller with scale variables

Question

I have a template (for a modal popup), and depending on its function, I need to load different controllers:

<div id="MsgBoxBack" ng-controller="{{notification.ctrl}}">

Controllers

app.controller('MainCtrl', ['$scope', function($scope){
    $scope.notification = {
        ctrl: 'logout', 
        //...
    };
}]);

app.controller('logout', ['$scope', function($scope){
    //...
}]);

When I try to set the controller name through a scope variable, I get the following error:

Error: [ng:areq] Argument 'notification.ctrl' is not a function, got string

So, how do I install a controller based on a variable scope?

Plunker

I have a related question about setting ng-click functions with scope variables with the same example here .

UPDATE

Giraffe gave me the idea of ​​a different approach to this problem. Instead of changing the controllers, I decided to use one common controller with the switch statement based on a variable scope:

<div id="MsgBoxBack" ng-controller="notification">

Controllers

app.controller('MainCtrl', ['$scope', function($scope){
    $scope.notification = {
        ctrl: 'logout', 
        //...
    };
}]);

app.controller('notification', ['$scope', function($scope){
  switch($scope.notification.ctrl) {
    case 'logout':
      console.log('logout');

      //...

      break;
  }

}]);

UPDATED PLANKER

, . - , , , .

Answer 1

ngRoute. , .