Using angular for dynamic changing mutiple classes in div

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="test">
    <table width="100%">
      <tr>
        <td>
           <h4>Shadow</h4>
            <input type="radio" ng-model="shadow" value="shadowYes"/>Yes<br/>
            <input type="radio" ng-model="shadow" value="shadowNo"/>No<br/>
            {{shadow}}
        </td>
        <td>
          <h4>Border color</h4>
            <input type="radio" ng-model="borderColor" value="borderSilver"/>Silver<br/>
            <input type="radio" ng-model="borderColor" value="borderBlack"/>Black<br/>
            <input type="radio" ng-model="borderColor" value="borderWhite"/>White<br/>
            {{borderColor}}
        </td>
        <td>
          <h4>Border width</h4>
            <input type="radio" ng-model="borderWidth" value="border1"/>1 px<br/>
            <input type="radio" ng-model="borderWidth" value="border2"/>2 px<br/>
            <input type="radio" ng-model="borderWidth" value="border3"/>3 px<br/>
            {{borderWidth}}
        </td>
        <td>
          <h4>Border style</h4>
            <input type="radio" ng-model="borderType" value="borderSolid"/>solid<br/>
            <input type="radio" ng-model="borderType" value="borderDashed"/>dashed<br/>
            {{borderType}}
        </td>
      </tr>
    </table>
   
    <div class="div {{shadow}} {{borderColor}} {{borderWidth}} {{borderType}}">this is a test box</div>      
    </div>
  </body>

</html>

// Code goes here

function test($scope){
  $scope.borderColor="borderBlack";
  $scope.shadow="shadowYes";
  $scope.borderWidth="border1";
  $scope.borderType="borderSolid";
  };

/* Styles go here */

.borderSolid{
  border-style:solid;
  }
  .borderDashed{
    border-style:dashed;
  }
.border1{
  border-width:1px;
}
.border2{
  border-width:2px;
}
.border3{
  border-width:3px;
}
.shadowYes{
  box-shadow:0 0 10px gray;
}
.shadowNo{
  box-shadow:none;
}
.borderSilver{
  border-color:silver;
}
.borderBlack{
  border-color:black;
}
.borderWhite{
  border-color:white;
}
.div{
  margin:20px;
  padding:20px;
  background-color:lightblue;
}