AngularJS - Change controller by condition?

Question

I have a simple form with data which summarize the pressed items ( via addition)

(JSBIN)

Answer 1

Just delegate to different methods based on if the box is checked

$scope.total = function() {
  if($scope.isMultiply) {
    // your multiply code
  } else {
    // non-multiply code
  }
}

You don't want to check to see if the checkbox is checked, but there's no way around that. Some code somewhere is going to have to respond to the state of the checkbox. This is simple, straightforward, and easy to read.

Answer 2

A simple way to choose controller, but keep the template the same, is to have the template in an external file, and wrap it in an ngIf, so:

<div ng-if="checked" ng-controller="CheckedController" ng-include="'template.html'">
</div>
<div ng-if="!checked" ng-controller="UncheckedController" ng-include="'template.html'">
</div>

As can be seen in this Plunker

Answer 3

There doesn't seem to be a built-in way to choose a controller based on some condition. The ngController directive doesn't seem to play well with interpolation of the name via {{ }}, or passing a string version of the controller name, so it doesn't seem to be possible to choose a controller by ngController dynamically based on some condition in the scope.

The most flexible solution to this I think is writing a custom directive, that accepts a string variable (including one returned by an expression)

<div dynamic-controller="checked ? 'CheckedController' : 'UncheckedController'">
  Inside {{name}}  
</div>

That then takes the name of the controller, puts it in an ng-controller attribute, and then (re)compiles the element, and do this whenever the expression returned by dynamic-controller changes. This could be done as follows:

app.directive('dynamicController', function($compile) {
  return  {
    transclude: 'element',
    scope: {
      'dynamicController': '=' 
    },
    link: function(scope, element, attr, ctrl, transclude) {
      var el = null;
      scope.$watch('dynamicController',function() {
        if (el) {
          el.remove();
          el = null;
        }
        transclude(function(clone) {
          clone.attr('ng-controller', scope.dynamicController);
          clone.removeAttr('dynamic-controller');
          el = $compile(clone[0])(scope.$parent)
          element.after(el);
        });
      });
    }
  }
});

You can see this in action in this Plunker