Angular: Empty Fiddle

http://angularjs.org/

HTML

<script type="text/ng-template" id="template1">
    {{ symbolsLength() }}
</script>
<script type="text/ng-template" id="template2">
    static html
</script>

<div ng-controller="MyCtrl">
    <input ng-model="symbols" />
    <button ng-click="click()">Change Template</button>
    <hr>
    <ng-include src="templateName"></ng-include>
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.symbols = 'four';
    $scope.templateName = 'template1';
    
    $scope.click = function() {
        $scope.templateName = ($scope.templateName == 'template1') ? 'template2' : 'template1';
    };
    
    var callsNum = 0;
    $scope.symbolsLength = function() {
        console.log('symbolsLength() calls: %d', ++callsNum);
        return $scope.symbols.length;  
    };
}