scopes and directives in AngularJs - angularjs-directive

Question

I am quite new to AngularJs and I am building a little app with it to challenge myself.
This is very simple at first sight : I would like to be able to choose multiple criteria then choose a value, based on the chosen criterion, so we can later filter the data.
Thus, I would like to maintain a "criterion-value" couples array to send it later to the server.
All I have done so far is in this : plunker
The bug is that all "select" directives are depending to one another...
I know the problem comes from the scope of the model variables "chosenValue" and "chosenCriterion" which are shared by all directives but how to make them locale to one div that belongs to the class "_new_criterion" and at the same time accessing to the array allChoices ?
Also how should I populate my "allChoices" object to have something like
[
{
criterion : "CITY",
value : "San Francisco"
},
{
criterion : "COMPANY",
value : "Something"
}
]
I have no idea whether this is the proper way to achieve this, so feel free to suggest an other solution.
here is a sample of the app's source code:
var app = angular.module('app', []);
angular.module('app').controller('MainCtrl', function($scope, $compile) {
$scope.allCouples = [];
$scope.add = function(ev, attrs) { //$on('insertItem',function(ev,attrs){
var criterionSelector = angular.element(document.createElement('criteriondirective'));
var el = $compile(criterionSelector)($scope)
angular.element(document.body).append(criterionSelector);
};
});
app.directive('criteriondirective', function($compile) {
return {
template: '<div class="_new_criterion"><select ng-model="chosenCriterion" ng-change="chooseCriterion(chosenCriterion)" ng-options="criterion.columnName for criterion in criteria" class="form-control"></select></div>',
restrict: 'E',
replace: true,
transclude: false,
compile: function(tElement, tAttrs, transclude) {
return function(scope, element, attr) {
scope.chooseCriterion = function(sel) {
var valueSelector = angular.element(document.createElement('valuedirective'));
var el = $compile(valueSelector)(scope);
tElement.append(valueSelector);
};
//rest call to get these data
scope.criteria = [{
columnName: 'turnover',
type: 'range'
}, {
columnName: 'city',
type: 'norange'
}, {
columnName: 'company',
type: 'norange'
}];
};
}
};
});
app.directive('valuedirective', function() {
return {
template: '<select ng-model="chosenValue" ng-options="value for value in values" ng-change="chooseValue(chosenValue)" class="form-control"></select>',
restrict: 'E',
replace: true,
transclude: false,
compile: function(tElement, tAttrs, transclude) {
return function(scope, element, attr) {
scope.chooseValue = function(sel) {
//I would like to register the couple "criterion-value" into the array allCouples how to pass the criterion as parameter to this directive ?
// scope.allCouples.push({criterion : "criterion", value : "value"});
};
//Rest call to get these data
scope.values = ["Paris", "San Francisco", "Hong-Kong"];
};
}
};
});
Thank you very much
p.s.: don't pay to much attention to the values array, in real case data are fetched Restfully

Answer 1

Your might want to isolate the scopes of your directives, at the moment they share and change same data. Try it with scope: true, for example.