A demo of applying CSS by using an object

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>
.divclass {
  background: #486273;
  height: auto;
  width:240px;
  border-radius: 14px;
  padding:10px;

}
</style>
</head>

<body>
<div class="container" ng-app="showdemo" ng-controller="ShowController">
    <h3>A demo of ng-style</h3>
    <div class="row">
      <div class="col-md-3">
        <button ng-click="shdiv = !shdiv" class="btn btn-success btn-lg">Show/Hide paragraph</button>
      </div>
      
      <div class="col-md-3 divclass" ng-show="shdiv">
      <p ng-style="CSSObj">ng-style demo</p>
        
      </div>
      
    </div>
    
</div>
<script>
var showdemo = angular.module('showdemo', [])

.controller('ShowController', function($scope) {

  $scope.shdiv = false;
      $scope.CSSObj = {
        "color" : "#fff",
        "border-radius" : "15px",
        "margin" : "10px",
        "background-color" : "#FFB062",
        "font-size" : "20px",
        "padding" : "20px"
    }
  
});
</script>
</body>
</html>
A demo of ng-style

ng-style demo