AngularJS Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found

Question

I have a main template to do some wizard like stepping through some templates:

<div ng-controller="StepController">
 <div ng-switch="step">
  <div ng-switch-when="1">
           <div ng-controller="ImportController">
              <div ng-include src="'static/javascripts/import/upload.html'">
           </div>
     <button type="button" class="btn btn-success btn-s"  ng-click="setStep(2)"> Next Step</button>
  </div>
  <div ng-switch-when="2">
     <div ng-include src="'static/javascripts/authentication/blank.html'">
      <button type="button" class="btn btn-success btn-s"  ng-click="setStep(3)"> Next Step</button>
  </div>
  <div ng-switch-when="3">
     <div ng-include src="'static/javascripts/authentication/blank.html'">
     <button ng-click="setStep(3)"></button>
  </div>
</div>

However when I click on the first button to render the next template I get the error

Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found

When I look at the source after clicking the button the ng-switch div tag is there so I am not sure why it is not working.

Answer 1

I'm pretty sure you're missing some closing elements. I reformatted the code as written.

<div ng-controller="StepController">
    <div ng-switch="step">
        <div ng-switch-when="1">
            <div ng-controller="ImportController">
                <div ng-include src="'static/javascripts/import/upload.html'">
                </div>
                <button type="button" class="btn btn-success btn-s"  ng-click="setStep(2)"> Next Step</button>
            </div>
            <div ng-switch-when="2">
                <div ng-include src="'static/javascripts/authentication/blank.html'">
                    <button type="button" class="btn btn-success btn-s"  ng-click="setStep(3)"> Next Step</button>
                </div>
                <div ng-switch-when="3">
                    <div ng-include src="'static/javascripts/authentication/blank.html'">
                        <button ng-click="setStep(3)"></button>
                    </div>
                </div>

With the missing elements

<div ng-controller="StepController">
    <div ng-switch="step">
        <div ng-switch-when="1">
            <div ng-controller="ImportController">
                <div ng-include src="'static/javascripts/import/upload.html'">
                </div>
                <button type="button" class="btn btn-success btn-s"  ng-click="setStep(2)"> Next Step</button>
            </div>
        </div>
        <div ng-switch-when="2">
            <div ng-include src="'static/javascripts/authentication/blank.html'">
                <button type="button" class="btn btn-success btn-s"  ng-click="setStep(3)"> Next Step</button>
            </div>
        </div>
        <div ng-switch-when="3">
            <div ng-include src="'static/javascripts/authentication/blank.html'">
                <button ng-click="setStep(3)"></button>
            </div>
         </div>
     </div>
</div>

---

The issues is that in the incorrect code, the second and third ng-switch-when elements are not directly below the ng-switch element. ng-switch-when looks at it's parent element for the ng-switch statement, which is missing.