AngularJS Route

embedded template

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<script type="text/ng-template" id="notab.tpl.html">
    This page do not get loaded after tab page ever
</script>

<script type="text/ng-template" id="tabPage.tpl.html">
    <tabset>
        <tab heading="Tab1">
            This is tab 1
        </tab>
        <tab heading="Tab2">
            This is tab 2
        </tab>
        <tab heading="Tab3">
            This is tab 3
        </tab>
    </tabset>
</script>

<div ng-controller="MyCtrl">

    <ul>
        <li><a href="#/simplePage">Tab Absent</a></li>
         <li><a href="#/tabPage">Tab Present</a></li>
    </ul>
    
    <div ng-view></div>
</div>

JavaScript

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('MyCtrl', function($scope) {});

myApp.config(function($routeProvider) {
       
    $routeProvider.when('/simplePage', {
        templateUrl: 'notab.tpl.html'
    }).
    when('/tabPage',{
        templateUrl: 'tabPage.tpl.html'
    });
});