ovarunendra/app.js

## app.js
/**
 * Created by ovarunendra on 05-10-2014.
 */
// Code goes here
angular.module('MyApp', [])
    .controller('MainCtrl', [function() {
        var self = this;
        self.template = 'first.html';
        self.change = function(){
           self.template = 'second.html';;
        };
    }]);

## first.html
<h1>First Template</h1>
Name:  <input type="text" ng-model="mainCtrl.name"></input>
<button ng-click="mainCtrl.change()">Save</button>

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Sample App</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MainCtrl as mainCtrl">
    <div ng-include="mainCtrl.template">
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

## second.html
<h2>Second Template</h2>
Name:   {{mainCtrl.name}}
	/**
	* Created by ovarunendra on 05-10-2014.
	*/
	// Code goes here
	angular.module('MyApp', [])
	.controller('MainCtrl', [function() {
	var self = this;
	self.template = 'first.html';
	self.change = function(){
	self.template = 'second.html';;
	};
	}]);
	<h1>First Template</h1>
	Name: <input type="text" ng-model="mainCtrl.name"></input>
	<button ng-click="mainCtrl.change()">Save</button>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sample App</title>
	</head>
	<body ng-app="MyApp">
	<div ng-controller="MainCtrl as mainCtrl">
	<div ng-include="mainCtrl.template">
	</div>
	</div>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
	<script src="app.js"></script>
	</body>
	</html>