AngularJS ng-switch-trigger within its own ng-switch-wrapper

Question

I am trying to switch 2 buttons which are their own switch-triggers. For better understanding:

<span ng-switch on="patientSwitch">
    <span ng-switch-when="edit">
        <button ng-click="patientSwitch='save'">save</button>
    </span>
    <span ng-switch-when="save">
        <button ng-click="patientSwitch"='edit'">edit</button>
    </span>
</span>

Here is some jsFiddle: http://jsfiddle.net/g7vKz/

Answer 1

Use an object instead:

myApp.controller("PatientCtrl", function($scope) {
  $scope.viewModel = { patientSwitch: "edit" };
});

And:

<span ng-switch on="viewModel.patientSwitch">
    <span ng-switch-when="edit">
        <button ng-click="viewModel.patientSwitch='save'">save</button>
    </span>
    <span ng-switch-when="save">
         <button ng-click="viewModel.patientSwitch='edit'">edit</button>
    </span>
</span>

Demo: http://jsfiddle.net/M7EX2/

ngSwitch creates a new scope, which means unless you use an object you will get this problem due to how prototypal inheritance works in JavaScript.

Very good post on the subject can be found here.