I have a sample application, and I am trying to display my model in one view, and edit it in another. Here is my controller:
var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope, $location) {
var self = this;
this.name = 'World';
this.someData = {name: 'test'};
this.someCopyData = {};
this.theEdit = function(path){
self.someCopyData = angular.copy(self.someData);
$location.path(path);
};
});
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'foo.html',
controller: 'MainCtrl as main'
})
.when('/edit', {
templateUrl: 'fooedit.html',
controller: 'MainCtrl as main'
});
}]);
The partial HTML is extremely simple:
Data: {{ main.someData.name }}
<br>
<br>
<a ng-click="main.theEdit('/edit')" >Resolve View</a>
and:
<input name="name" type="text" ng-model="main.someCopyData.name"/>
Plunker here.
How can I get the copy of my model to be displayed? This is clearly a scope issue, but I haven't figured out yet a proper explanation for the behaviour.