<div style="padding-bottom: 20px" class="form-inline ">
 <div ng-class="Class" class="form-group">
  <label for="UniverseId" class="control-label">Id:</label>
  <input ng-change="updateId()" id="UniverseId" class="form-control" type="number" ng-model="Data.id" min="0" max="4294967295"/>
 </div>
 <div class="form-group">
  <label for="UniverseName" class="control-label">Name:</label>
  <input placeholder="dimmers" required id="UniverseName" class="form-control" type="text" ng-model="Data.name"/>
 </div>
 <button ng-click="Submit()" class="btn btn-primary btn-md">Add Universe</button>
</div>
<div class="row">
 <div class="col-sm-6 settings-table">
  <table class="table table-condensed">
   <caption>Input Ports:</caption>
   <tr>
    <th>Enable</th>
    <th>Device</th>
    <th>Description</th>
   </tr>
   <tr class="striped-table" ng-repeat="plugin in Ports" ng-if="!plugin.is_output">
    <td><input type="checkbox" ng-change="TogglePort()" ng-model="addPorts[$index]" ng-true-value="'{{plugin.id}}'" ng-false-value="''"/></td>
    <td>{{plugin.device}}</td>
    <td>{{plugin.description}}</td>
   </tr>
  </table>
 </div>
 <div class="col-sm-6 settings-table">
  <table class="table table-condensed">
   <caption>Output Ports:</caption>
   <tr>
    <th>Enable</th>
    <th>Device</th>
    <th>Description</th>
   </tr>
   <tr class="striped-table" ng-repeat="plugin in Ports" ng-if="plugin.is_output">
    <td><input type="checkbox" ng-change="TogglePort()" ng-model="addPorts[$index]" ng-true-value="'{{plugin.id}}'" ng-false-value="''"/></td>
    <td>{{plugin.device}}</td>
    <td>{{plugin.description}}</td>
   </tr>
  </table>
 </div>
</div>
