view change

Maintaining data on view change

by mystikacid

HTML

<div ng-app="myApp">
    <div ng-controller="dataCtrl">
        
        <div>Data : {{data}} (Value outside views)</div>
        <div ng-include src="view"></div>
        
        <script type="text/ng-template" id="view1">
            <p> View 1 </p>
		    <p>Value inside view 1 : {{data}}</p>
            <input type = "text" ng-model = "data" /> 
            <button ng-click = 'changeView("view2")' > Go to view 2 </button>
        </script>
        
        <script type="text/ng-template" id="view2">
            <p> View 2 </p>
		    <p>Value inside view 2 : {{data}}</p >
            <input type = "text" ng-model = "data" />  
            <button ng-click = 'changeView("view1")' > Go to view 1 </button>
        </script>
        
    </div>
</div>

JavaScript

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

 myApp.factory('myFactory', function () {

     var factory = {};
     factory.data = 'Default data';

     return factory;
 });

 myApp.controller('dataCtrl', function ($scope, myFactory) {

     $scope.view = 'view1';
     $scope.data = myFactory.data;
     

     $scope.changeView = function (view) {
         $scope.view = view;
     }
 });