Use same input-model to multiple multiselectors?

[swapnilanar]

I am trying to use same input-model for multiple isteven-multi-select inside ng-repeat. But challenge I face is it binds to same input, so selecting any option from one dropdown selects that option in all isteven-multi-select

<div ng-repeat="d in dataList">
<div isteven-multi-select input-model="d.entities" output-model="d.selectedEntities" button-label="entityName" item-label="entityDisplayName" tick-property="ticked" max-labels="1">
</div>
</div>

[sterichards]

I'm having exactly the same problem on exactly the same day

I'm generating the isteven-multi-select inside an ng-repeat and I can't get them to separate. I've tried using a different output-model but that doesn't help

[isteven]

Hi peeps,

That's the default behavior of Javascript: object is, by default, copied by reference (not deep copy). So any changes in one will affect all.

If you need it, you need to deep-copy the object you want manually before passing it into the directive.

[sterichards]

@isteven I had seen your comments from the other issues that mention this behaviour and it's solved using your previous suggestion of using angular.copy

Thank you,

[swapnilanar]

@sterichards Yea, that's one workaround I had to do to complete functionality.
I had to create one dummy property in my dataList and bind that to input-model

HTML-
<div ng-repeat="d in dataList">
<div isteven-multi-select input-model="d.entities" output-model="d.selectedEntities" button-label="entityName" item-label="entityDisplayName" tick-property="ticked" max-labels="1">
</div>
</div>

JS-
$scope.dataList.forEach(function (d) { d.entities= angular.copy(data); })