<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
<script data-require="ui-bootstrap@*" 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>
<form name="form" class="form-horizontal" ng-controller="ctrl">
<tabset>
<tab justified="true">
<tab-heading>
Main
</tab-heading>
<div class="form-group">
<label class="col-xs-2 control-label" for="etaDate">ETA Date</label>
<div class="input-group col-xs-6 col-sm-4 col-md-2">
<input class="form-control" id="etaDate" name="etaDate" type="text" ng-model="model.eta" datepicker-popup="dd/MM/yyyy" is-open="opened.open" show-weeks="false" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</tab>
<tab>
<tab-heading>
second
</tab-heading>
<div>asdasdas</div>
</tab>
</tabset>
<button ng-click="getdate()">GET DATE</button>
</form>
</body>
</html>
angular.module('myApp', ['ui.bootstrap']);
var ctrl = function($scope) {
$scope.opened = {};
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened.open = true;
};
$scope.model = {eta: new Date()};
$scope.getdate = function (){
alert($scope.model.eta)
};
};
/* Styles go here */