how to create personal scope for each compiled element? - angularjs

Question

When I create new 'wItem' object and want to append compiled DOM to container(not ng-repeat)
container.append($compile(UIService.appendItem())($scope));
var children = container[0].children;
var length = children.length-1;
//take appended element and set new scope Item there
var newEl = children[length];
angular.element(newEl).scope().item = wItem;
UIService.appendItem
function appendWorkItem() {
return '<div layout="column" class=" workItem workItemName" id={{item._id}}child > ' +
'<div>{{item.name}}</div> ' +
' </div>'
}
the result is:
First time
wItem[0] = {_id:1, name: item1}
, it creates wItem and appends to DOM!
second and other times I should be:
wItem[1] = {_id:2, name: item2}
wItem[2] = {_id:3, name: item3}
it creates new wItem and when it appends to DOM it updates previous created elements with the last wItem scope.and I getting this:
I am not so good in it,but I think it passes scope of last element to prev ones. How to fix it?

Answer 1

First, don't manipulate the DOM from your controller. Controllers provide scope and are generally nothing but scoping glue for views and models.
Get familiar with directives because they're practically required. Similarly it is critical to understand scopes. Failing to understand scopes and directives will doom your angular efforts.
Here's a directive implementing your UIService. It can be done other ways.
.directive("workItem", ['UIService', function(uiservice) {
return {
scope: {
item: "="
},
template: function() {
return uiservice.appendWorkItem();
}
}
}])
As has been pointed out you need to familiarize yourself with the ng-repeat directive. An example using the workItem directive and ng-repeat might look like this
<div ng-controller="WorkItems">
<div ng-repeat="item in items">
<work-item item="item"></work-item>
</div>
</div>
Here's a plnkr demonstrating the above directive used with ng-repeat.
I suggest staying away from $compile until you have a good grasp of directives and scopes (and actually have a bona fide reason to use it).