HTML Code
Output
<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.pred {
  background: red;
  height: auto;
  width:150px;
  padding:5px;
  font-size:16px;
  color:#eee;  
}
.pgreen {
  background: #008000;
  height: auto;
  width:150px;
  padding:5px;
  font-size:16px;
  color:#eee;  
}
.pblue {
  background: #0000A0;
  height: auto;
  width:150px;
  padding:5px;
  font-size:16px;
  color:#eee;  
}
.pyellow {
  background: #FFFF00;
  height: auto;
  width:150px;
  padding:5px;
  font-size:16px;
  color:#000;  
}
</style>     
</head>
<body ng-app="showcolorP">
<div class="container"  ng-controller="colorController">

    <div class="page-header text-center">
       <h1>A demo of ng-show with paragraphs</h1>
    </div>
    <div class="row">
      <div class="col-md-4">
        <form>
          <div class="form-group">
            <label>Select a color:</label>
            <select class="form-control" ng-model="color">
            <option>red</option>
            <option>green</option>
            <option>blue</option>
            <option>green</option>
            
            </select>
          </div>
        </form>
      </div>
      
      <div class="col-md-4">
        <p class="pred" ng-show="color == 'red'">The Red is true</p>
        <p class="pgreen" ng-show="color == 'green'">The Green is true</p>
        <p class="pblue" ng-show="color == 'blue'">The Blue is true</p>
        <p class="pyellow" ng-show="color == 'yellow'">The Yellow is true</p>

      </div>
    </div>
    
</div>
<script>
var showcolorP = angular.module('showcolorP', [])

.controller('colorController', function($scope) {
        
});
</script>
</body>
</html>
A demo of ng-show with paragraphs

The Red is true
The Green is true
The Blue is true
The Yellow is true