ng-repeat中的隔离模型

Question

I'm trying to isolate models in ng-repeat but this models must have access to same data.

Here is JS-fiddle to illustrate a problem: http://jsfiddle.net/r50adyx4/

If you click on add button and switch between select options you can see, that only first select input is isolated. Other two are changing in each repeated model.

<div class="addCert" ng-click="allLicences.push(allLicences.length+1)">
        <p>Add certification +</p>
    </div>
<form ng-submit="processForm()">
    <ul ng-repeat="licence in allLicences">
        <select ng-model="models[licence]" ng-options="l.cntryName for l in data"></select>
         <select ng-model="models[licence].discipline" ng-options="d.name for d in models[licence].disciplines"></select>
         <select ng-model="models[licence].discipline.level" ng-options="lvl.levelName for lvl in models[licence].discipline.levels"></select>
    </ul>

I thought that targeting models in ng-repeat with models[licence] would make every occurance isolated.

So what is going on? How can i isolate other two so they will be unique for every ng-repeat?

EDIT to make thing more clear:
If you add one or more models (certificates) and you select the same country (let's say Slovenia) for all those models other two selects must be independent for each model.

If that would work i could select Slovenia -> Alpine skiing -> U1 in the first one and Slovenia -> Telemark -> U5 in the second one.
I hope i am clear enough...

Answer 1

JSFiddle

Each item in the repeat should refer to a separate object (data) so that any bindings are separated.

JS

$scope.add = function () {
    $scope.allLicences.push(angular.copy($scope.data));
}

$scope.allLicences = [];
$scope.add();

Markup

<div class="addCert" ng-click="add()">
    <p>Add certification +</p>
</div>
<form ng-submit="processForm()">
    <ul ng-repeat="licenceItem in allLicences">
        <select ng-model="licence" ng-options="l.cntryName for l in licenceItem"></select>
        <select ng-model="licence.discipline" ng-options="d.name for d in licence.disciplines"></select>
        <select ng-model="level" ng-options="lvl.levelName for lvl in licence.discipline.levels"></select>
    </ul>
    <hr>
    <hr>{{ allLicences}}
    <input type="submit" value="submit">
</form>

Edit :

I think this version is better because you aren't making copies of data - JSFiddle

JS

$scope.add = function () {
    $scope.allLicences.push({});
}

Markup

    <ul ng-repeat="item in allLicences track by $index">
        <select ng-model="allLicences[$index].licence" ng-options="l.cntryName for l in data"></select>
        <select ng-model="allLicences[$index].discipline" ng-options="d.name for d in allLicences[$index].licence.disciplines"></select>
        <select ng-model="allLicences[$index].level" ng-options="lvl.levelName for lvl in allLicences[$index].discipline.levels"></select>
    </ul>