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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/ng-template" id="home.tpl.html">
    This is a home page
</script>
<script type="text/ng-template" id="www.yahoo.com">
    This is a demo page
</script>
<script type="text/ng-template" id="contact.tpl.html">
    This is a contact page
</script>



<div ng-controller="MyCtrl">

   <div class="navbar">
		<div class="navbar-inner">
			<ul class="nav">
                <li class="active"><a href="#/home">Home</a></li>
                <li><a href="#/demo">Demo</a></li>
                <li><a href="#/contact">Contacts</a></li>
			</ul>
       </div>
		</div>
    
    <div ng-view></div>
</div>

JavaScript

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

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

myApp.config(function($routeProvider) {
       
    $routeProvider.when('/home', {
        templateUrl: 'home.tpl.html'
    }).
    when('/demo',{
        templateUrl: 'www.yahoo.com'
    }).
    when('/contact',{
        templateUrl: 'contact.tpl.html'
    })
    .otherwise({redirectTo: '/home'});;
});


$('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });