Changing ng-include source dynamically.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="switchCtrl">
  <input type='button' ng-value='buttonText' ng-click="doEdit()" />
    <div ng:include="template.url"></div>
  </div>
</body>

</html>

// Code goes here


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

app.controller('switchCtrl', function($scope) {

  $scope.templates = [{
    name: 'template-one.html',
    url: 'template-one.html'
  }, {
    name: 'template-two.html',
    url: 'template-two.html'
  }];
  
  $scope.hasPermissionToEdit = true;
  $scope.buttonText = 'Edit';
  $scope.isEditing = false;
  $scope.shared = 'shared value between templates.';
  $scope.template = $scope.templates[0];
  
  $scope.doEdit = function() {
    if ($scope.isEditing) {
      $scope.template = $scope.templates[0];
      $scope.isEditing = false;
      $scope.buttonText = 'Edit';
    } else {
      if ($scope.hasPermissionToEdit) {
        $scope.template = $scope.templates[1];
        $scope.isEditing = true;
        $scope.buttonText = 'Go back';
      } else {
        alert('you don\'t have permission to edit');
      }
    }
  }
});

/* Styles go here */

Change Templates Dynamically
============================

Changing ng-include source dynamically. Majorly for view and edit functionality.

<div>
  <h1>View template.</h1>
  <p>{{shared}}</p>
</div>

<div>
  <h1>Edit template.</h1>
  <p>{{shared}}</p>
</div>