Exhibition through select without ng-show

by 3ernardo

HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <body>  

    <div ng-app="">
      <select ng-model="visibility">
        <option value="class1" ng-selected="true">Red Class</option>
        <option value="class2">Green Class</option>
        <option value="class3">Blue Class</option>
        <option value="class4">Yellow Class</option>
      </select>

      <div ng-class="visibility">
        <div class="child">
          <p>Element from class 1.</p>
        </div>
        <div class="child">
          <p>Element from class 2.</p>
        </div>
        <div class="child">
          <p>Element from class 3.</p>
        </div>
        <div class="child">
          <p>Element from class 4.</p>
        </div>
      </div>
    </div>

  </body>
</html>

CSS

body {background-color: LightSlateGray; }

div.class1 div.child,
div.class2 div.child,
div.class3 div.child,
div.class4 div.child {
  display: none;
}

div.class1 div:nth-child(1),
div.class2 div:nth-child(2),
div.class3 div:nth-child(3),
div.class4 div:nth-child(4) {
  display: block;
}

.class1 { color: red; }
.class2 { color: green; }
.class3 { color: blue; }
.class4 { color: yellow; }