<!DOCTYPE html>
<html ng-app="x">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width">

  <title>UI.Layout : holy grail demo</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

  <link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
  <link rel="stylesheet" href="style.css">
</head>

<body  ng-controller="DemoController">

    <div ui-layout="config" ui-layout-loaded>
    <div ui-layout-container collapsed="layout.one">
      One
      <br/>
      <button ng-click="updateDisplay()">Update Display</button>
    </div>
    <div ui-layout-container collapsed="layout.four">
      Four
    </div>
  </div>
    
  <!-- Le javascript -->
  <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script type="application/javascript" src="https://rawgit.com/angular-ui/ui-layout/5e23ee9e1d9a920ad967cdbd791e5ec44a676a0b/src/ui-layout.js"></script>
  <script>
    var app = angular.module('x', ['ui.layout']);
    app.controller('DemoController', function($scope, $timeout) {
      $scope.config = {
        flow: 'column'
      };

      $scope.layout = {
        one: true,
        four: true
      };

      $scope.toggle = function(which) {
        $scope.layout[which] = !$scope.layout[which];
      };

      $scope.close = function(which) {
        $scope.layout[which] = true;
      };

      $scope.open = function(which) {
        $scope.layout[which] = false;
      }

      $scope.$on('ui.layout.loaded', function(){
        $timeout(function(){
          $scope.layout.four = true;
        });
      })
    });
  </script>
</body>

</html>
/* Styles go here */


# UI.Layout : holy grail demo

Here is a simple demo of my UI.Layout.
[More info](https://github.com/angular-ui/ui-layout/pull/2)