Updating object properties with objects Angular - angularjs

Question

I am new to angular so forgive me if I use the incorrect terminology! I would also prefer any solutions using the latest Angular version if possible :-) I have some fairly complex use cases.
One of these is a customer edit screen. I have already built the list page and customer details forms, this works well. This also posts back some JSON. I have removed this from my example.
Something that a user must set is a customers stages which can be multiple. Therefore i will use checkboxes.
What I do is load the current user into the scope, then modify its values. then save to a web service. However i have some complex properties and figuring out how to bind these is problematic.
i found this example here which i can get to work if i put the options on my controller directly (shown in code)
http://plnkr.co/edit/cqsADe8lKegsBMgWMyB8?p=preview
however I cannot bind the check boxes on the currentUser.pipe properties. Any help would be greatly appreciated!
kind regards
jim
//our object definitions are here
function User(Firstname, Lastname, Id) {
this.Firstname = Firstname;
this.Lastname = Lastname;
this.PersonId = Id;
this.uuid = "OG6FSDHG6DF86G89DSHGDF8G6";
//hold the customers source
this.source = 2;
//these are used to populate our selection boxes
this.pipe = new Object();
//PROBLEM CODE IS HERE
//I WOULD LIKE TO OUTPUT A CHECKBOX FOR EACH ITEM AND THEN UPDATE THE SELECTED VALUE WHEN A USER CLICK IT
this.pipe.stages = [
{ id: 1, text: 'STAGE 1', selected: true },
{ id: 2, text: 'STAGE 2', selected: false },
{ id: 3, text: 'STAGE 3', selected: true },
{ id: 4, text: 'STAGE 4', selected: false }
];
this.getFullName = function () {
return this.Firstname + " " + this.Lastname + " " + Id;
};
}
function UserController($scope) {
//called to populate the customers list
$scope.populateCustomers = function () {
//this will be populated form the server. I have extra code which allows th euser ot select the customer and edit it and this works fine.
//I have removed the superflous code
$scope.userList = [
new User("John", "Doe", 1),
new User("Henri", "de Bourbon", 2),
new User("Marguerite", "de Valois", 3),
new User("Gabrielle", "d'Estrées", 4)
];
};
$scope.populateCustomers();
// the currentUser pobject is loaded by the user and modified. This works fine
$scope.currentUser = $scope.userList[0];
//if i add the stages here i can get them to update however these are different for each
//customer and would like the state to be held accordingly
$scope.stages = [
{ id: 1, text: 'STAGE 1', selected: true },
{ id: 2, text: 'STAGE 2', selected: true },
{ id: 3, text: 'STAGE 3', selected: true },
{ id: 4, text: 'STAGE 4', selected: true }
];
}
Here are the templates i have used. This one works off scope.stages
stages from scope.stages<br />
<label ng-repeat="stage in stages">
<input type="checkbox" value="{{stage.name}}" ng-model="stage.selected">{{stage.name}}
</label>
<p>stages: {{stages}}</p>
And this is what i would like to do however it shows the check boxes but doesnt bind correctly.
stages from currentUser.pipe.stages<br />
<label ng-repeat="stage in currentUser.pipe.stages">
<input type="checkbox" value="{{stage.name}}" ng-model="stage.selected">{{stage.name}}
</label>
<p>stages: {{stages}}</p>

Answer 1

Everything works perfectly. I think you have print the wrong variable in the currentUser.pipe.stages template. It will be <p>stages: {{currentUser.pipe.stages}}</p>.
stages from currentUser.pipe.stages<br />
<label ng-repeat="stage in currentUser.pipe.stages">
<input type="checkbox" value="{{stage.name}}" ng-model="stage.selected">{{stage.name}}
</label>
<!-- Print currentUser.pipe.stages -->
<p>stages: {{currentUser.pipe.stages}}</p>
See this PLUNKER. Its binding properly.