In diesem Plunkr, warum aktualisiert das ng-Modell nicht?

Question

Ich gab mir einen ui-select plunkr und passte ihn meiner eigenen Situation an. Das ng-Modell wird nicht aktualisiert, aber durch Klicken auf die Schaltfläche zum Aktualisieren des Modells wird ui-select aktualisiert.

Vielen Dank im Voraus!

<h3>Select2 theme</h3> 
    <p>Selected: {{id}}</p> 
    <ui-select ng-model="id" theme="select2" style="min-width: 300px;"> 
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.email}}</ui-select-match> 
    <ui-select-choices repeat="person.id as person in people.devs | propsFilter: {email: $select.search, id: $select.search}"> 
     <div ng-bind-html="person.id | highlight: $select.search"></div> 
     <small> 
     <span ng-bind-html="''+person.id | highlight: $select.search"></span> 
     {{person.email}} 
     </small> 
    </ui-select-choices> 
    </ui-select> 

    <br> 
    <br> 
    <br> 
    <button class="btn btn-primary"ng-click="id = 2">Change Model</button> 
    <span>(id = 2) </span> 

http://plnkr.co/edit/3vEXkkNLvuNhpO1hKpmj?p=previewenter link description here

Answer 1

Problem der Anwendungsbereich:

<ui-select ng-model="$parent.id" ....> 

Um Variable in Ihrem Controller dieses Problem nie Verwendung Punktnotation zu haben und initialisieren: Vermittler Felder Bedeutung.

// controller 
$scope.context = {id:-1}; 
// html 
    <ui-select ng-model="context.id" 

Dieses sehr oft passieren, ng-if wird das gleiche Problem verursachen. Dies ist ein Limit für die Vererbung von Javascript. Angular kann nichts dagegen tun.