JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.6/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.6/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
<div ng-app="MyApp">
<div ng-controller="AppCtrl">
<form name="loginForm" >
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="login">
<md-input-container>
<label>Username</label>
<input type="text" name="login_username" ng-model="login.username" required />
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="login_passwd" ng-model="login.passwd" required />
</md-input-container>
<md-button class="md-button md-raised" ng-disabled="loginForm.$invalid" ng-click="dologin()">Login</md-button>
</md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
</md-tabs>
</form>
</div>
</div>
JavaScript
(function () {
'use strict';
angular
.module('MyApp',['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl ($scope) {
$scope.login = {
username: '',
passwd: ''
};
$scope.dologin = function(){
alert($scope.login.username);
alert(this.login.username);
}
}
})();