Application layout ideas using twitter bootstrap and angular

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@3.0.3" data-semver="3.0.3" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="app" ng-controller="appController" ng-init="startup()">
      <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <!-- navbar-header content will always be visible -->
        <div class="navbar-header">
          <p class="navbar-brand" href="#home">PRODUCT</p>
          <a class="navbar-brand" href="#home"><span class="glyphicon glyphicon-home"></span></a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <!-- sr-only is for screen reader devices, it will be hidden for other devices -->
            <span class="sr-only">Toggle Dropdown</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <!-- collapsable content for smaller devices -->
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <!-- logged out state toggled 'login' option -->
            <li ng-show="!loggedIn" class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown">login<b class="caret"></b></a>
              <div class="dropdown-menu" style="padding: 15px;">
                <!-- login form -->
                <ng-include src="'loginform.html'"></ng-include>
              </div>
            </li>
            <!-- logged in state toggled 'logout' option -->
            <li ng-show="loggedIn" class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown">{{currentUser.username}}<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a ng-click="logout()">logout</a></li>
              </ul>
            </li>
            <li><a class="navbar-link pull-left" href="#help"><p>Help</p></a></li>
          </ul>
        </div>
      </div>
      </nav>
      <div class="container-fluid-content" id="content">
        <div class="row equalHeight" id="content-row">
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 equal" style="border: 1px solid blue;">
            <div class="sidebar-nav">
              <ul class="nav nav-list">
                <li>item 1</li>
                <li>item 2</li>
              </ul>
            </div>
          </div>
          <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 equal" style="border: 1px solid red;">
            <div class="hero-unit">
              <h1>Hello World</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

// Code goes here
angular.module('app', ['ngRoute', 'controllers']);

angular.module('app')
  .config(function($routeProvider) {
      $routeProvider.when('/home', { templateUrl : 'home.html', controller : 'homeController'});
      $routeProvider.when('/help', { templateUrl : 'help.html', controller : 'helpController'});
      $routeProvider.otherwise({ redirectTo: '/home' });
    });
    
angular.module('controllers', [])
  .controller('appController', ['$scope', '$window', function($scope, $window) {
    $scope.title = 'appController title text';
    $scope.loggedIn = false;
    $scope.currentUser = undefined;
    $scope.data = {};
    $scope.data.loginAttempt = undefined;//{ username : 'user@domain.domain', password : '' };
    
    var windowResize = function () {
      console.log('windowResize called');
      
      // our body tag is set to 100% of viewport
      var bodyHeight = $('body').height();
      
      var contentPadding = $(".navbar").height() + parseInt($(".navbar").css("padding-bottom"))
            + parseInt($(".navbar").css("padding-top"));
      $('#content').css("padding-top", contentPadding);
      $('#content').css("min-height", bodyHeight);
      $('#content').css("max-height", bodyHeight);
      $('#content-row').css("min-height", bodyHeight - contentPadding - 1);
      $('#content-row').css("max-height", bodyHeight - contentPadding - 1);
            
      $('.equalHeight').each(function() {
        var height = $(this).innerHeight();
        console.log('windowResize: innerHeight = ' + height);
        $(this).find('div.equal').outerHeight(height);
      })
    };
    
    $scope.startup = function () {
      angular.element($window).on('resize', windowResize);
      console.log('startup called!');
      windowResize();
    }
    
    $scope.login = function(username, password) {
      console.log('login called : username = "' + username + '", password = "' + password + '"')

      if (!$scope.loggedIn && username && username.trim().length > 0) {
        $scope.loggedIn = true;
        $scope.currentUser = { id: 1, username : username};
        
        $scope.data.loginAttempt = undefined;
      }
      else {
        $scope.loggedIn = false;
      }
    }
    
    $scope.loginCancel = function() {
      $scope.data.loginAttempt = undefined;
    }
    
    $scope.logout = function() {
      if ($scope.loggedIn) {
        $scope.loggedIn = false;
        $scope.currentUser = undefined;
      }
    }
  }])
  .controller('homeController', ['$scope', function($scope) {
    $scope.title = 'homeController title text';
  }])
  .controller('helpController', ['$scope', function($scope) {
    $scope.title = 'helpController title text';
  }]);

/* Styles go here */
body {
  /*padding-top: 70px;*/
  width: 100%;
  height: 100%;
  position: absolute;
}

.container-fluid {
  /* offset the negative margins of 'row' classes */
  padding: 0 10px;  
}

.container-fluid-content {
  padding: 0 0;
}

.container-fluid-content .row {
  /* counteract the the .container-fluid effect of applying a margin of 15px */
  /* between the view port and content rows */
  margin: 0;
  margin-top: 1px;/* allow for the debug border width (1px) just now */
}

.equalHeight {
  
}

.equal {
  
}

<div class="container">
  <h1>{{title}}</h1>
</div>

<div class="container">
  <h1>{{title}}</h1>
</div>

<form class="navbar-form">
  <div class="form-group textbox">
    <input ng-model="data.loginAttempt.username" type="text" placeholder="username" required>
    <input ng-model="data.loginAttempt.password" type="password" placeholder="password">
    <input ng-click='login(data.loginAttempt.username, data.loginAttempt.password)' type="submit">
  </div>
</form>