Angular example using ng:include

by otupman

HTML

<script type="text/ng-template" id="partial1.html">
    <h1>Hi! {{counter}}</h1>
</script>

<script type="text/ng-template" id="partial2.html">
    <h1>Hi there {{counter}}</h1>
    <button ng-click="decrement()">Back, I say, back!</button>
</script>

<div ng-controller="MyCtrl">
    <p>{{message}}</p>
    
    <button ng-click="nextTemplate()">Next!</button>
    
    <ng-include src="templateUrl"/>
</div>

JavaScript

function MyCtrl($scope) {
    $scope.counter = 1;
    $scope.message = "Hello, world";
    $scope.templateUrl = 'partial1.html';
    
    var _flip = function() {
        $scope.templateUrl = ($scope.templateUrl == 'partial1.html') ? 'partial2.html' : 'partial1.html';
    }
    
    $scope.decrement = function() {
        $scope.counter--;
         _flip();
    }
    
    $scope.nextTemplate = function() {
        $scope.counter++;
        _flip();   
    }
}