JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc10.js"></script>
<script src="http://fluid-src.appspot.com/angular-layout/1.0/fl_layout.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
   <a-layout>
      <a-block>
         <a-screen>
            <h1 id="the_kitten_pound">The Kitten Pound</h1>
         </a-screen>
      </a-block>
      <a-block>
         <a-screen with-name="cage">
           <h3>The Cage</h3>
            <div><img ng-repeat="kitten in kittens" src="http://www.cuteheaven.com/wp-content/uploads/2010/09/kitten.jpg" width="100" height="120"></div>
            <div>
               <p><input type="button" ng-click="_screen.overlay().show()" value="Check new kitten in"><input type="button" ng-click="_screen.show('surgery')" value="Proceed to surgery"></p>
            </div>
            <an-overlay ng-controller="CheckInCtrl">
               <div an-overlay-panel="center">
                  <label for="kitten_name">Kitten Name:</label><input type="text" name="kitten_name" value="" id="kitten_name" ng-model="kitten.name"><br>
                  <label>Cuteness:<select ng-model="kitten.cuteness" ng-options="level for level in cutenessLevels">
                  </select></label><br/>
                  <input type="button" ng-click="checkIn()" value="Check in Kitty"><br>
                  <input type="button" ng-click="_overlay.hide()" value="I'm Done">
               </div>
               <div ng-click="_overlay.hide()" class="ov-back"></div>
            </an-overaly>
         </a-screen>
         <a-screen with-name="surgery">
           <h3>Surgery</h3>
            <table border="0" cellspacing="5" cellpadding="5">
               <tr>
                  <th>Kitten Name</th>
                  <th>Cuteness</th>
                  <th>Treatment</th>
               </tr>
               <tr ng-repeat="kitten in kittens">
                  <td>{{kitten.name}}</td>
                  <td>{{kitten.cuteness}}</td>
                  <td>
             ...

CSS

.ov-back {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;                    
}
.an-overlay-panel {
   z-index: 100;
   background-color: #fff;
   padding: 10px; 
   border-radius: 10px;    
   text-align: center;
}

JavaScript

angular.module('myApp', ["flLayout"]);

function AppCtrl ($scope) {
   $scope.kittens = [
      {name: "mittens", cuteness: 8},
      {name: "fluffy", cuteness: 6},
      {name: "tabby", cuteness: 7},
      {name: "chairman meow", cuteness: 2},
      {name: "skinny posh paws", cuteness: 0}
   ];
   $scope.findHome = function(kitten){
      var ind = $scope.kittens.indexOf(kitten);
      if(ind>-1){
         $scope.kittens.splice(ind, 1)
         $scope.foundHome = kitten;
      }
   }
   $scope.killKitty = function(kitten){
      var ind = $scope.kittens.indexOf(kitten);
      if(ind>-1){
         $scope.kittens.splice(ind, 1)
         $scope.putDown = kitten;
      }
   }
}

function CheckInCtrl ($scope) {
   $scope.cutenessLevels = [0,1,2,3,4,5,6,7,8,9,10]
   $scope.kitten = {name: "somename", cuteness: 0 }
   $scope.checkIn = function(){
      $scope.kittens.push(angular.copy($scope.kitten, {}));
   }
}

function KittyHeavenCtrl ($scope) {
   $scope.$watch("putDown", function (newval) {
      if(angular.isDefined(newval)){
         $scope._overlay.show();
      }
   })
}

function KittyHomeCtrl ($scope) {
   $scope.$watch("foundHome", function (newval) {
      if(angular.isDefined(newval)){
         $scope._overlay.show();
      }
   })
}