Can't append divs when using ng-switch-when AngularJS?

Question

I am using ng-switch when method to append divs. This is the code created

<input type="checkbox" ng-model="data" />

<ng-switch on="data">
  <span ng-switch-when="true">
    <div class="firstSwitch"></div>
  </span>

  <span ng-switch-default>
    <div class="secondSwitch"></div>
  </span>
</ng-switch>

Its working fine now. But when i want to append something in the div.

Say, i want to append text using javascript inside secondSwitch div, but i can't append it because initially the secondSwitch div is not appended.

setTimeout(function(){
    $(".secondSwitch").html("<p>Second Switch is displayed</p>");

    $(".firstSwitch").html("<p>First Switch is displayed</p>");
},100);

Here the text is appended properly inside firstSwitch div because initially it is created but the text is not appended inside secondSwitch div because it's not created.

So, i can't append inside that div. So, how to overcome this problem guys. Here is the Plnkr

Answer 1

As you already noticed ng-switch modifies DOM and firstSwitch is not created initially. You should use binding to get this working. Here is working demo

  <ng-switch on="data">
<span ng-switch-when="true">
  <div class="firstSwitch"><p>{{firstText}}<p></div>
</span>
<span ng-switch-default>
  <div class="secondSwitch"><p>{{secondText}}<p></div>
</span>

  app.controller('MainCtrl', function($scope, $timeout) {
  $scope.data = false;

  $timeout(function(){

        $scope.firstText = "First Switch is displayed";  
        $scope.secondText = "Second Switch is displayed";
  },100);

Update
And here's demo for binding to html