shaik2many/angular-jquery-tabs.html

## angular-jquery-tabs.html
<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
  <script type='text/javascript' src="http://code.angularjs.org/1.0.3/angular.min.js"></script>
</head>
<body ng-app='myApp'>
    <div ng-controller="myCtrl">
        <div data-hbo-tabs id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
                <li><a href="#tabs-3">Tab 3</a></li>
            </ul>
            <div id="tabs-1">
                <p>Content for Tab 11111</p>
            </div>
            <div id="tabs-2">
                <p>Content for Tab 2</p>
            </div>
            <div id="tabs-3">
                <p>Content for Tab 3</p>
            </div>
        </div>
    </div>
</body>
<script type='text/javascript'>
    var app=angular.module('myApp', [])
        .controller('myCtrl', function ($scope) {
    })
    .directive('hboTabs', function() {
        return {
            restrict: 'A',
            link: function(scope, elm, attrs) {
                 $(elm).tabs();
            }
        };
    })
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
	<script type='text/javascript' src="http://code.angularjs.org/1.0.3/angular.min.js"></script>
	</head>
	<body ng-app='myApp'>
	<div ng-controller="myCtrl">
	<div data-hbo-tabs id="tabs">
	<ul>
	<li><a href="#tabs-1">Tab 1</a></li>
	<li><a href="#tabs-2">Tab 2</a></li>
	<li><a href="#tabs-3">Tab 3</a></li>
	</ul>
	<div id="tabs-1">
	<p>Content for Tab 11111</p>
	</div>
	<div id="tabs-2">
	<p>Content for Tab 2</p>
	</div>
	<div id="tabs-3">
	<p>Content for Tab 3</p>
	</div>
	</div>
	</div>
	</body>
	<script type='text/javascript'>
	var app=angular.module('myApp', [])
	.controller('myCtrl', function ($scope) {
	})
	.directive('hboTabs', function() {
	return {
	restrict: 'A',
	link: function(scope, elm, attrs) {
	$(elm).tabs();
	}
	};
	})
	</script>
	</html>