Angular: ng-template example
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<select ng-model="sel" ng-options="i.val as i.name for i in list"></select>
<div class="sel-value" ng-bind="'Selected value:'+(sel | json)"></div>
<div>
Content of template:
<ng-include class="content" src="sel"></ng-include>
</div>
</div><!-- closing 'MyCtrl' div, which was opened in jsfiddle 'style tab'-->
CSS
.content{border:1px solid blue;
background-color:#eff;}
.sel-value{
border:1px solid green;
background-color:#efe;
}
div{margin-top:12px;}
</style>
<!-- start of controller code -->
<div ng-controller="MyCtrl">
<!-- ng-script templates -->
<script type="text/ng-template" id="/nothing.html">
Just for test ...
</script>
<script type="text/ng-template" id="/tmpl1.html">
Just for test 1 ...
</script>
<script type="text/ng-template" id="/tmpl2.html">
Content of the template 2.
</script>
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.list = [{name:'none',val:'/nothing.html'},
{name:'template 1',val:'/tmpl1.html'},
{name:'template 2',val:'/tmpl2.html'}];
$scope.sel = $scope.list[0].val;
}