<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
</head>
<body ng-app>
<!-- ng-show ng-hide example -->
<!-- css 변경 방식 -->
Click me : <input type="checkbox" ng-model="result"><br/>
<div ng-show="result">this is true</div>
<div ng-hide="result">this is hide</div><br>
<!-- ng-show ng-hide example -->
<!-- dom 변경 방식으로 아예 제거한다 -->
Click me2 : <input type="checkbox" ng-model="result2" ng-init="result2=true"><br/>
<span ng-if="result2">this is true</span>
<span ng-if="!result2">this is hide</span> <br>
<!-- ngSwidth -->
<!-- dom 변경 방식으로 아예 제거한다 -->
<br>
Check your grade <select ng-model='grade'>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<div ng-switch on="grade">
<p ng-switch-when="A"> A </p>
<p ng-switch-when="B"> B </p>
<p ng-switch-when="C"> C </p>
<p ng-switch-when="D"> D </p>
<P ng-switch-default>Nothing</P>
</div>
</body>
</html>
// Code goes here
/* Styles go here */